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:

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

farer away:

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

Lines behave exactly like you want in Three.js.


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:


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