Is it possible to place several animated objects into Three.js scene?

101 views Asked by At

I'm quite new to WebGL, and I'm trying to create cake with animated candles. So, I have found this examples: https://stemkoski.github.io/Three.js/Particle-Engine.html with candle flame and tried to change code due to my task (cake). But I struggled with creating several flames into same scene (I found some information how to create cubes or spheres, but unfortunately it is unhelpful in this case). As far as I understand animated flame displaying is in the code:

this.engine = new ParticleEngine();
engine.setValues( Examples.fountain );
engine.initialize();

but I can't figure out how to create 5 different examples same time.

UPD: I finally created several instances, here is my code:

var engines = [];
var coordinates = [
    {x:5, y:105},
    {x:-40, y:115},
    {x:-75,y:111},
    {x:37, y:117},
    {x:68, y:110}
];
coordinates.forEach(function(item, i){
   var params = clone(Examples.candle);
   params.positionBase = new THREE.Vector3(item.x, item.y, 10);
   var engine = new ParticleEngine();
   engine.setValues(instances[i]);
   engine.initialize();

   engines.push(engine);
 }

But when I tried to set different example (smoke from examples) to one instance all other instance's parameters had been changed too. Can't figure out how to change each instance separately without any influence others.

0

There are 0 answers