Zohaib's Thoughts and Links

Creating Dynamic Lines with ThreeJS

I came across a need for the ability to draw dynamically in Three.js. A small hack is to create a line and fill the vertices with the starting point. Note the line.geometry.dynamic flag which is set to true.

var geometry, line, lineMaterial,
     MAX_LINE_POINTS = 100000;

lineMaterial = new THREE.MeshBasicMaterial({
	color: 0x000
});

geometry = new THREE.Geometry();
for (i=0; i < MAX_LINE_POINTS; i++){
	geometry.vertices.push(new THREE.Vector3(0, 0, 0));
}

line = new THREE.Line(geometry, lineMaterial);
line.geometry.dynamic = true;

scene.add(line);

Now, when you want to add more vertices to the line, it’s as simple as three steps:

// shift the array
line.geometry.vertices.push(line.geometry.vertices.shift());
// add the point to the end of the array
line.geometry.vertices[100000-1] = new THREE.Vector3(newPoint);
line.geometry.verticesNeedUpdate = true;

Check out Collavrate for more info.

Previous Jan 1, 2015
« Give it five minutes.