Keeping LineBasicMaterial in the same width regardless of camera position

I want to have a constant line-width regardless of camera distance in LineBasicMaterial,
is there an option to do that? Because I see in the documentation there is a limitation regarding that.

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

You can’t implement this feature request with line primitives because of the mentioned WebGL limitation.

However, there is a triangle based line implementation which enables so called wide lines. Check out the following demo:

https://threejs.org/examples/webgl_lines_fat

1 Like

Thanks, I’ll check those. Is this triangle based line could have the same look as a regular line / graph link?

In the example you gave the author used ‘Line2’ which is from jsm library, which element I need to use to draw a simple line like that just using threeJS?

That’s not possible. You need to import the additional modules from examples/jsm in order to use wide lines.

Ok, but which one should I use, Line2?
And are those modules exist in npm?

Yes. When you download the three npm package, you can import the classes like so:

import { Line2 } from 'three/examples/jsm/lines/Line2.js';
import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js';
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js';

good :).
So which one should I use in order to achieve the constant width?
The demo uses some of them so it’s not clear.

Use Line2.

ok, will try it!
thanks a lot :slight_smile:

@Mugen87
I’m trying to build a single Line2 geometry based on the demo you gave, but I don’t succeed giving a single Line (link) geometry between two nodes.
No matter what I put in “position” it doesn’t really draw a line.

Can you please help me? Here is my code:

const geometry = new LineGeometry();
var color = new THREE.Color();
var colors = [color.r, color.g, color.b];
geometry.setPositions([
-10, 0, 0,
0, 10, 0,
10, 0, 0
]);

    geometry.setColors(colors);

    var matLine = new LineMaterial({
        color: 'red',
        linewidth: 20, // in pixels
        vertexColors: true,
        //resolution:  // to be set by renderer, eventually
        dashed: false
    });

    var line = new Line2(geometry, matLine);
    line.computeLineDistances();
    line.scale.set(1, 1, 1);
    return line;

You are not setting the resolution of the screens to the line material object.

1 Like