火焰未在 THREE.js 世界中显示

Question

我正在使用 THREE.js 和 spark.js 制作火焰，但是当我渲染世界时，我看不到火焰并且世界是空的。我看到了错误的控制台，但没有关于此的错误。我尝试了很多，但无法找出实际的错误。这是代码。

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));

谢谢

Answer 1

粒子和 WebGL 渲染存在奇怪的问题。如果你使用 CanvasRender 会很好。但对于 WebGL 则不然。 同样在您的代码中，您忘记了为粒子创建threejs 对象。 Sparks.js 只允许粒子接口。但是您需要自己创建粒子。 你可以看看我的 jsfiddle 例子。在那里我使用了 sparks.js 库的修改版本。更改只是为了能够覆盖 VectorPool 行为。

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 新向量池

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 中使用的和手动预先创建的部分的数量。

我的 sparkjs 分支在这里：https://github.com/elephanter/sparks.js 在那里我修复了最新的 tweenjs 的问题并添加了我之前描述的其他小更改。