Animation du système de particules dans trois JS

Question

J'utilise le code suivant pour animer certaines particules d'un système de particules dans 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); 
         } 

Il fonctionne en changeant les sommets des particules. Cela les change très bien sans erreur, mais il n'y a pas de mise à jour. Je peux me déplacer et toutes les autres animations fonctionnent bien. Ceci est en ma fonction animate(), comme ceci:

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

D'abord, je pense que vous devez mettre à jour les sommets, ne pas les remplacer par de nouvelles instances:

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

Ensuite, vous pouvez également avoir à dire trois .js que les sommets ont changé:

particleSystem.geometry.verticesNeedUpdate = true; 

Ceux-ci devraient se faire au cours de la update()