Variable line width for THREE.LineSegments

I want to draw lines with variable widths. Right now I declare

var material = new THREE.LineBasicMaterial({vertexColors:true, linewidth: x});
var geometry = new THREE.BufferGeometry();
// initialize ‘position’, ‘color’ attributes on the buffer geometry to describe many line segments
var lines = new THREE.LineSegments(geometry, material);

but of course the width is fixed for all line segments. How would one go about doing this?

see three.js docs :

.linewidth : Float

Controls line thickness. Default is 1 .

Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.


see three.js examples

When I set linewidth: 5, it works, so that part is not relevant at least on my system (perhaps because I’m using WebGL 2.0). What I want is to set it on a per-segment basis.

There is an option with fat lines: How to change line width in Shader - #4 by prisoner849

1 Like