javascript - 在移动的物体之间画一条线

Question

我试图在两个移动的顶点之间画一条线。顶点的绘图存储在一个名为 object 的变量中，该变量具有一个 position，即 THREE.Vector3。

该行是这样创建的:

var Line = function(scene, source, target){
  var geometry = new THREE.Geometry();
  geometry.dynamic = true;
  geometry.vertices.push(source.object.position);
  geometry.vertices.push(target.object.position);
  geometry.verticesNeedUpdate = true;

  var material = new THREE.LineBasicMaterial({ color: 0x000000 });
  var line = new THREE.Line( geometry, material );

  scene.add(line);
  return line;
};

...，其中源和目标是顶点，顶点通过以下方式更新:

vertex.object.position.add(vertex.velocity);

现在，我将 source.object.position 和 target.object.position 分配给 line.geometry.vertices[0]和 line.geometry.vertices[1] 因为我想要一个与另一个更新。但是相反，顶点位置与线位置相差很大。顶点在它们所在的位置，但线不连接到顶点。

如何让线条随顶点移动？

Answer 1

在您的动画循环中，您必须设置 line.geometry.verticesNeedUpdate = true。因为每次渲染后都会变成false。 jsfiddle例子