2013-07-14 7 views
3

Я действительно пробовал каждый пример, обыскал в Интернете часами, но я не могу заставить его работать!Доступ к отдельным частицам в системе частиц THREE.js

Так что я просто пытался реализовать небольшую систему частиц, имитирующую падающий снег, так же, как это: http://www.aerotwist.com/tutorials/creating-particles-with-three-js/

Но я могу только получить доступ к нему в целом. Это значит, что я могу повернуть его как таковой, но как только я попытаюсь перебрать его вершины, вся анимация получает икоту! Я бы очень признателен за помощь здесь!

-

Вот основные части:

-> Настройка системы частиц:

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 & Анимация на 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

+0

что вы хотите сделать с этой частицей? обычно вам нужно использовать шейдеры для этой цели (здесь есть учебное пособие http://www.aerotwist.com/tutorials/an-introduction-to-shaders-part-1/). Но если вы хотите просто изменить положение одиночной частицы, вы можете выбрать ее из partikelGeo.vertices, изменить ее координаты, а затем установить флаг partikelGeo.verticesNeedUpdate в true (в старых версиях three.js, я думаю, это partikelGeo .__ dirtyVertices = true). – dIsoVi

ответ

0

Ваш код выглядит хорошо для меня. Я просто предлагаю попробовать не сортировку частиц, как вы используете аддитивное смешивание:

partikelSystem.sortParticles = false;

+0

Я также думаю, что 3500 частиц не слишком велики для Javascript. Я сделал это с 15 различными текстурами одновременно и несколькими более сложными анимациями. Я закончил спускаться до 1200, чтобы сделать рендеринг> 30 кадров в секунду. – BaptisteB