Flame is not showing in THREE.js World

问题

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

Thanks

回答1:

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/

Main part there is:

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

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

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

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.

来源：https://stackoverflow.com/questions/16558517/flame-is-not-showing-in-three-js-world

标签

javascript

three.js

WebGL

apache-spark