Create a line whose thickness stays, independent of camera position

I made these yellow lines with Windows’ Paint to illustrate what I’m trying to achieve

near perspective:
grafik

far perspective - zoom out (watch the linewidh - it stays the same) :
grafik

farer away:
grafik

So the goal is that the thickness (on the screen) stays the same. Hope you understand what I mean…
Is this possible in ThreeJS?

Hi!
Lines behave exactly like you want in Three.js.

2 Likes

Small addition^^: Rendering line primitives with WebGL always results in 1px wide lines. If you need wider lines, consider to use three.js's mesh line implementation:

https://threejs.org/examples/webgl_lines_fat

3 Likes

Apparently openGL had a linewidth property, but it didn’t work on windows, because directX didn’t support it, so the webGL standard removed the linewidth property, or made it optional, depending on the version iirc.

I use this extension if I want more flexibility with lines:


You can specify linewidth proportional to the screen, or object, and even provide an array of widths for custom tapering, it’s very useful.

1 Like