三個JS中的動畫粒子系統

Question

我使用以下代碼爲Three.js中的粒子系統中的某些粒子製作動畫。

for(var i = 0; i < particleSystem.geometry.vertices.length; i++){ 
         var pX = Math.sin(i + counter) * 100 + Math.random() * 20, 
          pY = Math.cos(i + counter) * 100 + Math.random() * 20, 
          pZ = Math.sin(i + counter) * 100 + Math.random() * 20; 
          particleSystem.geometry.vertices[i] = new THREE.Vector3(pX, pY, pZ); 
         } 

它可以通過改變顆粒的頂點。它改變它們沒有錯誤，但沒有更新。我可以四處移動，其他所有動畫都可以正常工作。這是我animate()功能，如：

function animate(){ 


      for(var i = 0; i < particleSystem.geometry.vertices.length; i++){ 
      var pX = Math.sin(i + counter) * 100 + Math.random() * 20, 
       pY = Math.cos(i + counter) * 100 + Math.random() * 20, 
       pZ = Math.sin(i + counter) * 100 + Math.random() * 20; 
       particleSystem.geometry.vertices[i] = new THREE.Vector3(pX, pY, pZ); 
      } 



     counter += 1; 


     requestAnimationFrame(animate); // So it stops when you change window and otherwise repeats 
    renderer.render(scene,camera); // Render 
    controls.update(clock.getDelta()); // Update control/camera movement information 

} 

Answer 1

首先，我想你應該更新的頂點，而不是新的實例替換它們：

particleSystem.geometry.vertices[i].set(pX, pY, pZ); 

然後，你可能還需要告訴三.js文件的頂點已經改變：

particleSystem.geometry.verticesNeedUpdate = true; 

這些應該在update()

完成