# Keeping LineBasicMaterial in the same width regardless of camera position

**URL:** <https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658>\
**Category:** Questions\
**Tags:** lines\
**Created:** [September 13, 2020, 12:11pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658 "2020-09-13T12:11:00Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 13, 2020, 12:11pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/1 "2020-09-13T12:11:00Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 13, 2020, 12:27pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/2 "2020-09-13T12:27:46Z")

</div>

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](https://threejs.org/examples/webgl_lines_fat)

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 13, 2020, 1:23pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/3 "2020-09-13T13:23:57Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 13, 2020, 2:24pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/5 "2020-09-13T14:24:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 13, 2020, 3:53pm UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/6 "2020-09-13T15:53:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 14, 2020, 8:36am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/7 "2020-09-14T08:36:48Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 14, 2020, 8:56am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/8 "2020-09-14T08:56:14Z")

</div>

> [@nitzanorchestra](#):
>
> And are those modules exist in npm?

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

```js
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';

```

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 14, 2020, 9:16am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/9 "2020-09-14T09:16:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [September 14, 2020, 9:23am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/10 "2020-09-14T09:23:57Z")

</div>

Use `Line2`.

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 14, 2020, 9:36am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/11 "2020-09-14T09:36:10Z")

</div>

ok, will try it!  
thanks a lot 🙂

---

<div class="post-metadata">

**Author:** ![nitzanorchestra](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nitzanorchestra/32/13671_2.png) [@nitzanorchestra](https://discourse.threejs.org/u/nitzanorchestra)\
**Post date:** [September 15, 2020, 8:50am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/12 "2020-09-15T08:50:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dubois](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dubois](https://discourse.threejs.org/u/dubois)\
**Post date:** [September 16, 2020, 1:18am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/13 "2020-09-16T01:18:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ChrisCoder9000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/chriscoder9000/32/36407_2.png) [@ChrisCoder9000](https://discourse.threejs.org/u/ChrisCoder9000)\
**Post date:** [May 19, 2023, 8:23am UTC](https://discourse.threejs.org/t/keeping-linebasicmaterial-in-the-same-width-regardless-of-camera-position/18658/14 "2023-05-19T08:23:38Z")

</div>

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

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

```