Skip to content Skip to sidebar Skip to footer

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

Solution 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.


Post a Comment for "Flame Is Not Showing In THREE.js World"