1

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]));
Kevin Murphy
  • 378
  • 8
  • 24
  • Possible duplicate of [Workaround for lack of line width on Windows when using Three.js](http://stackoverflow.com/questions/21067461/workaround-for-lack-of-line-width-on-windows-when-using-three-js) – Paul-Jan Dec 15 '16 at 07:52

1 Answers1

2

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

WestLangley
  • 102,557
  • 10
  • 276
  • 276
  • 1
    I voted to close the question as duplicate, but this answer is pretty useful. Your working regarding `linewidth` support, "except on some Windows platforms", surprised me. Are there any Windows browsers left that do not run on Angle/DirectX (i.e. thus supporting linewidth)? I usually describe WebGL linewidth as "generally not supported". – Paul-Jan Dec 15 '16 at 07:57