title: Accessing single particles in THREE.js Particle System
body: <p>I really tried every example, searched the web for hours but I can't seem to get it working!</p>
  
  <p>So I simply tried to implement a little particle system simulating falling snow, just like this: <a href="http://www.aerotwist.com/tutorials/creating-particles-with-three-js/" rel="nofollow">http://www.aerotwist.com/tutorials/creating-particles-with-three-js/</a></p>
  
  <p>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!</p>
  
  <p>-</p>
  
  <p>Here are the key parts:</p>
  
  <p>-> Setting up the particle system:</p>
  
  <pre><code>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 &lt; 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);
  </code></pre>
  
  <p>-> Rendering &amp; Animation on mouseclick</p>
  
  <pre><code>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 &lt; -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;       
  
  
  
  
          }
  </code></pre>
  
  <p>Rah</p>