CODEWITHSUNDEEP
javascriptthree.js
Joshua M. Moore
Joshua M. Moore

Reputation: 399

Drawing a line between moving objects

I'm trying to draw a line between two moving vertices. The vertex's drawing is stored in a variable called object, which has a position, which is a THREE.Vector3.

The line is created thusly:

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;
};

..., where source and target are vertices and the vertices get updated via:

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

Now, I assigned the source.object.position and target.object.position to the line.geometry.vertices[0] and line.geometry.vertices[1] because I wanted one to update with the other. But instead, the vertex positions vary wildly from the line positions. The vertices are where they are, but the lines don't connect to the vertices.

How can I make the lines move with the vertices?

Upvotes: 4

Views: 3356

Answers (1)

prisoner849
prisoner849

Reputation: 17586

In your animation loop you have to set line.geometry.verticesNeedUpdate = true. Because every time after rendering it becomes false. jsfiddle example

Upvotes: 4

Related Questions