Accessing single particles in THREE.js Particle System

Question

I really tried every example, searched the web for hours but I can't seem to get it working!

So I simply tried to implement a little particle system simulating falling snow, just like this: http://www.aerotwist.com/tutorials/creating-particles-with-three-js/

But I only can access it in whole. Meaning I can rotate it as such but as soon as I try to iterate over it's vertices, the whole animation is getting the hiccups! I would really appreciate some help here!

-

Here are the key parts:

-> Setting up the particle system:

var partikelGeo = new THREE.Geometry();
    var partikelMaterial = new THREE.ParticleBasicMaterial({
        color:0xffffff,
        size: 10,
        map: THREE.ImageUtils.loadTexture('snowflake2.png'),
        blending: THREE.AdditiveBlending,
        transparent:true
        });

        var partikelAnzahl = 3500;


        for (var p = 0; p < partikelAnzahl; p++) {

            var pX = Math.random() * 1000 -500;
            var pY = Math.random() * 1000 -500;
            var pZ = Math.random() * 1000 -500;

            var partikel = new THREE.Vertex(new THREE.Vector3(pX,pY,pZ));

            partikel.velocity = new THREE.Vector3(0,-Math.random(),0);

            partikelGeo.vertices.push(partikel);



        }   



    var partikelSystem = new THREE.ParticleSystem(partikelGeo, partikelMaterial);
    partikelSystem.sortParticles = true;
    scene.add(partikelSystem);

-> Rendering & Animation on mouseclick

var frame = 0;

        function animate(){

        // request new frame
        requestAnimationFrame(function(){
            animate();
        });

        // render
        render();
  }

animate();


        var check = 0;

        onmousedown = function(){

            if (check) {
                check = 0;
            }else{
                check = 1;
            }

        }

        function render() {

              if (check) {
                clickDo();
              }


            camera.lookAt(new THREE.Vector3(0,0,0));

             renderer.render(scene,camera);

        }




        function clickDo() {
            frame++;

    partikelSystem.rotation.y += 0.01;


    var pCount = partikelAnzahl;
        while(pCount--) {

          // get the particle
          var particle =
        partikelGeo.vertices[pCount];

          // check if we need to reset
          if(particle.position.y < -200) {
        particle.position.y = 200;
        particle.velocity.y = 0;
          }

          // update the velocity with
          // a splat of randomniz
          particle.velocity.y -=
        Math.random() * .1;

          // and the position
          particle.position.addSelf(
        particle.velocity);
        }

        // flag to the particle system
        // that we've changed its vertices.
        partikelSystem.
          geometry.
          __dirtyVertices = true;       




        }

Rah

what do you want to do with this particle? usually you need to use shaders for this purpose (here is a tutorial http://www.aerotwist.com/tutorials/an-introduction-to-shaders-part-1/). But if you want simply change the position of single particle, you can choose it from partikelGeo.vertices, change it coordinates and then set flag partikelGeo.verticesNeedUpdate to true (in old revisions of three.js I guess it is partikelGeo.__dirtyVertices = true). — dIsoVi, Jul 15 '13 at 10:29

score 0 · Answer 1 · answered Jul 15 '13 at 18:02

0

Your code looks good to me. I would just suggest to try not sorting your particles as you use an additive blending:

partikelSystem.sortParticles = false;

answered Jul 15 '13 at 18:02

BaptisteB

1,168
2
9
16

I also wonder if 3500 particles is not too big for Javascript. I did it with like 15 different textures in the same time, and some more complex animations. I ended up going down to 1200 to make the rendering >30fps. – BaptisteB Jul 15 '13 at 18:14

Accessing single particles in THREE.js Particle System

1 Answers1