Drawing a line with three.js dynamically

by

You can animate a line — or increase the number of points rendered — very easily using BufferGeometry and the setDrawRange() method. You do need to set a maximum number of points, however.

var MAX_POINTS = 500;

// geometry
var geometry = new THREE.BufferGeometry();

// attributes
var positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

// draw range
drawCount = 2; // draw the first 2 points, only
geometry.setDrawRange( 0, drawCount );

// material
var material = new THREE.LineBasicMaterial( { color: 0xff0000 } );

// line
line = new THREE.Line( geometry,  material );
scene.add( line );

You set the position data using a pattern like this one:

var positions = line.geometry.attributes.position.array;

var x = y = z = index = 0;

for ( var i = 0, l = MAX_POINTS; i < l; i ++ ) {

    positions[ index ++ ] = x;
    positions[ index ++ ] = y;
    positions[ index ++ ] = z;

    x += ( Math.random() - 0.5 ) * 30;
    y += ( Math.random() - 0.5 ) * 30;
    z += ( Math.random() - 0.5 ) * 30;

}

If you want to change the number of points rendered after the first render, do this:

line.geometry.setDrawRange( 0, newValue );

If you want to change the position data values after the first render, you set the needsUpdate flag like so:

line.geometry.attributes.position.needsUpdate = true; // required after the first render

Here is a fiddle showing an animated line which you can adapt to your use case.

EDIT: See this answer for a technique that you may like better — especially if the line consists of only a few points.

three.js r.84

More Related Contents:

  1. Thickness of lines using THREE.LineBasicMaterial
  2. Multiple transparent textures on the same mesh face in Three.js
  3. How to stop a requestAnimationFrame recursion/loop?
  4. How to get the absolute position of a vertex in three.js?
  5. Three.js / WebGL – transparent planes hiding other planes behind them
  6. Replicating MeshLambertMaterial Using ShaderMaterial ignores textures
  7. How to detect collision in three.js?
  8. Three.js/WebGL: Large spheres appear broken at intersection
  9. WebGL / Three.js – Particles colored by texture flicker erratically while moving camera
  10. Antialiasing not working in Three.js
  11. Threejs: assign different colors to each vertex in a geometry
  12. Why do shaders have to be in html file for webgl program?
  13. “Cross origin requests are only supported for HTTP.” error when loading a local file
  14. How can I render an ‘atmosphere’ over a rendering of the Earth in Three.js?
  15. How to Fit Camera to Object
  16. Three.js – Orthographic camera
  17. How to rotate a 3D object on axis three.js?
  18. Using textures in THREE.js
  19. What is the logic of binding buffers in webgl?
  20. Is it possible to enable unbounded number of renderers in THREE.js?
  21. Any way to get a bounding box from a three.js Object3D?
  22. How do I clean up and unload a WebGL canvas context from GPU after use?
  23. Three JS Pivot point
  24. Convert 2:1 equirectangular panorama to cube map
  25. How do you pack one 32 bit integers into 4, 8bit ints in GLSL / WebGL?
  26. Proper way to detect WebGL support?
  27. Why does my canvas go blank after converting to image?
  28. How to render clipped surfaces as solid objects
  29. Three.js multiple materials on object loaded via OBJMTLLoader
  30. Apply color gradient to material on mesh – three.js

Leave a Comment