three.jslinethickness

Three js line thickness

I am using three js and need a way to draw lines that have a thickness greater that 1px. Whenever I use LineBasicMaterial and try to change the lineWidth property, nothing happens. There is already a reason related to Windows Chrome versions so I am asking if there are any good, working alternatives that can help me achieve thick lines.

Here is the material:

const material = new THREE.LineBasicMaterial({
        color: "red",
        lineWidth: 20
});
Solution

  • To force the line to be greater than 1px the width and height of the viewport must be passed as uniforms (attributes to the shader) so that the when the line is rendered, the shader understands how large the view is relative to the line width you are requesting.