火焰不three.js所展示的世界 [英] Flame is not showing in THREE.js World

问题描述

我正在使用three.js所和spark.js火焰，但是当我使世界上我看不到火焰和世界都是空的。我看到了错误的控制台但对此没有错误。我尝试了很多，但无法找到实际的错误。这里是code。

I am making a flame using the THREE.js and spark.js, but when I render the world I can't see the flame and the world is empty. I saw the console for the error but there is no error regarding this. I tried a lot but can't find out the actual error. Here is the code.

threexSparks = new THREEx.Sparks({
                    maxParticles : 400,
                    counter : new SPARKS.SteadyCounter(300)
                });
                //threexSparks.position.x = 1000;
                // setup the emitter
                //var emitter   = threexSparks.emitter();

                var counter = new SPARKS.SteadyCounter(500);
                var emitter = new SPARKS.Emitter(counter);

                var initColorSize = function() {
                    this.initialize = function(emitter, particle) {
                        particle.target.color().setHSV(0.3, 0.9, 0.4);
                        particle.target.size(150);
                    };
                };

                emitter.addInitializer(new initColorSize());
                emitter.addInitializer(new SPARKS.Position(new SPARKS.PointZone(new THREE.Vector3(1000, 0, 0))));
                emitter.addInitializer(new SPARKS.Lifetime(0, 0.8));
                emitter.addInitializer(new SPARKS.Velocity(new SPARKS.PointZone(new THREE.Vector3(0, 250, 00))));

                emitter.addAction(new SPARKS.Age());
                emitter.addAction(new SPARKS.Move());
                emitter.addAction(new SPARKS.RandomDrift(1000, 0, 1000));
                emitter.addAction(new SPARKS.Accelerate(0, -200, 0));

感谢

推荐答案

泰雷是奇怪的问题有颗粒和WebGL渲染。如果你使用CanvasRender这将是很好的。但对WebGL的不是。
另外，在你的code你忘记了用粒子创建threejs对象。 Sparks.js只允许粒子界面。但是，你需要创建粒子本身。
你可以看一下我的jsfiddle例子。还有我用修改sparks.js库版本。改变只是为了能够覆盖VectorPool行为。

Tere is strange problems with particles and WebGL render. It will be good if you're using CanvasRender. But for WebGL not. Also in your code you forgot about creating threejs objects for particles. Sparks.js allows only interface for particles. But you need to create particles itself. You can look at my jsfiddle example. there I use modified version of sparks.js library. Changes just to be able to override VectorPool behaviour.

http://jsfiddle.net/YeJ4X/35/

主要组成部分有：

var particleCount = 1800,
    particles = new THREE.Geometry(),               //store particle vertices
    pMaterial = new THREE.ParticleBasicMaterial({
        size: 10,
        map: txture,                    //in jsfiddle i create texture from canvas
        transparent: true
      });
var particleSystem = new THREE.ParticleSystem(particles, pMaterial); //threejs particle system

//initialize our particles (and set that are dirty). sparkjs initialize it later for us   
for(var p = 0; p < particleCount; p++) {
    v = new THREE.Vector3(numMax,numMax,numMax);
    v.isDirty=true;
    particles.vertices.push(v);
}
SPARKS.VectorPool.__pools = particles.vertices; //initialize vectors pool

和有我的新载体池sparksjs

And there is my new vector pool for sparksjs

SPARKS.VectorPool = {
    __pools: [],
    get: function() {
        var ret = _.find(this.__pools, function(v){return v.isDirty});
        ret.isDirty=false;
        return ret;
    },
    release: function(v) {
        v.isDirty=true;
        v.set(numMax,numMax,numMax);
    }
};

当然，你必须关心它在sparks.js和手pcreated $ P $使用partices的计数。

Of course you must care about count of partices that are used in sparks.js and precreated by hands.

我sparkjs叉是在这里： https://github.com/elephanter/sparks.js我有与固定介绍最新tweenjs问题，并添加我之前所描述的其他变化不大。

My sparkjs fork is here: https://github.com/elephanter/sparks.js there I fix problem with lastest tweenjs and add other little changes I described before.

这篇关于火焰不three.js所展示的世界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！