Reputation: 408
I'm working on visualizing paths of lines in Three.JS and have successfully added a bunch of lines to the scene with the correct vertices, and material that I want but the lines are hard to see. Is there a way to convert a line segment into a tube of sorts without having to start from scratch and change the type of geometry I'm using?
I may not be using the correct terminology but I basically want to turn a generated THREE.LineSegments()
into a thicker line in 3D. Below is a snippet of my code:
var geo = new THREE.BufferGeometry();
geo.addAttribute('position', new THREE.BufferAttribute(new Float32Array(2*numTravelVertices), 3));
var travelVertices = geo.attributes.position.array;
var vertIndex = 0;
this.set('travelVertices', travelVertices);
<add vertex indicies for points on the path>
geo.rotateX(-Math.PI / 2);
var mat = new THREE.LineBasicMaterial({color: parseInt(this.get('travelColor')), transparent: false});
var lineSegments = new THREE.LineSegments(geo, new THREE.MultiMaterial([mat]));
Upvotes: 1
Views: 3583
Reputation: 104833
You can draw thick lines by setting the LineBasicMaterial
linewidth
parameter:
material.linewidth = 4; // default is 1
This currently does not work on some Windows platforms. So an alternate solution is to use the thrid-party class THREE.MeshLine, which renders thick lines by drawing a strip of triangles.
You can use THREE.TubeGeometry
, but that would not be as performant as MeshLine
.
three.js r.82
Upvotes: 2