three.js行不更新

Question

我正在使用three.js。并且行不更新。我想要实时延长这条线。

• 我想，首先，通过读取这两个数据绘制一条线。
• 二，场景清晰。
• 三，读取第三条信息和延长线。
• 四，场景清晰。
• 最后一行实时更长。

但是，这行不会生成。

var geometry = new THREE.Geometry(); 
var material = new THREE.LineBasicMaterial ({color : 0x0100FF, linewidth : 6}); 
function line_(k){ 
      if(k-1 >= 0){ 
       geometry.vertices.push (new THREE.Vector3 (py[k]*API.Orbit_Scale ,pz[k]*API.Orbit_Scale ,px[k]*API.Orbit_Scale)); 
      } 
      else{ 
       geometry.vertices.push (new THREE.Vector3 (0,0,0)); 
      } 
      line = new THREE.Line (geometry, material); 
      line.geometry.verticesNeedUpdate = true; 
      scene.add (line); 
     } 

function animate(){ 
      onWindowResize(); 
      line.geometry.verticesNeedUpdate = true; 
      renderer.render(scene, camera); 
      scene.remove(line); 
      requestAnimationFrame(animate); 
     } 

Answer 1

随着THREE.Geometry例如，您可以更新阵列中的现有顶点的位置和使用verticesNeedUpdate动画线。您无法将顶点添加到现有线路，并且期望verticesNeedUpdate可以使用添加的顶点绘制您的新线路。

到顶点添加到现有的线几何的最简单的解决方法是：

• 从场景中删除旧线
• 创建额外的顶点新线
• 添加行现场

你也可以将它绑定到动画循环。

---

如果你想制作动画，不会删除/添加，你必须使用一个使用THREE.BufferGeometry实例与drawCalls替代的几何形状。如何做到这一点你可以阅读here in this answer