CODEWITHSUNDEEP
javascriptthree.jslinethickness
Jack Carbone
Jack Carbone

Reputation: 133

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
});

Upvotes: -2

Views: 2487

Answers (2)

AlirezaBest1111
AlirezaBest1111

Reputation: 21

See https://threejs.org/docs/#api/en/materials/LineBasicMaterial.linewidth:

.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.

Upvotes: 2

Jack Carbone
Jack Carbone

Reputation: 133

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.

Upvotes: 0

Related Questions