訪問THREE.js粒子系統中的單個粒子

我真的嘗試過每個例子，搜索了幾個小時的網頁，但我似乎無法讓它工作！訪問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);

- >上點擊鼠標

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;  




     }

渲染&動畫

拉赫

來源

2013-07-14 user2581608

你想在這個粒子做什麼？通常你需要爲此使用着色器（這裏是一個教程http://www.aerotwist.com/tutorials/an-introduction-to-shaders-part-1/）。但是如果你只想改變單個粒子的位置，你可以從partikelGeo.vertices中選擇它，改變它的座標，然後設置標誌partikelGeo.verticesNeedUpdate爲true（在舊版本的three.js中，我猜它是partikelGeo .__ dirtyVertices = true ）。 – dIsoVi

你的代碼對我來說很好看。我只想建議儘量不要選你作爲顆粒使用的添加劑混合：

partikelSystem.sortParticles = false;

來源

2013-07-15 18:02:16 BaptisteB

我也想知道3500粒子對於Javascript來說不是太大。我在同一時間使用了15種不同的紋理，以及一些更復雜的動畫。我最終將降低到1200，使渲染> 30fps。 – BaptisteB

訪問THREE.js粒子系統中的單個粒子

回答

相關問題