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

Tere是粒子和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 fork在这里：https://github.com/elephanter/sparks.js我解决了最新的tweenjs的问题，并添加了我之前描述的其他一些小改动。

火焰没有出现在THREE.js世界中

1 个答案: