Kevin Murphy
Kevin Murphy

Reputation: 408

Expand or make a THREE.LineSegments thicker

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

Answers (1)

WestLangley
WestLangley

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

Related Questions