2016-03-08 41 views
1

我正在使用three.js。并且行不更新。我想要实时延长这条线。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); 
     } 

回答

1

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

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

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

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


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