Keeping LineBasicMaterial in the same width regardless of camera position

Questions
1

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.

2

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
3

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

5

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?

6

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

7

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

8

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';
9

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.

10

Use Line2.

11

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

12

@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;
13

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

1 Like
14

You saved my as* I was trying to make this Lines work but without success! damn that resolution ahha:

          const meterial = new LineMaterial({
            color: 0x00ff00,
            linewidth: 10,
            resolution: new THREE.Vector2(
              window.innerWidth,
              window.innerHeight
            ),
          });