# How draw lwpolyline?

**URL:** <https://discourse.threejs.org/t/how-draw-lwpolyline/51642>\
**Category:** Questions\
**Tags:** materials, shaders, geometry\
**Created:** [May 16, 2023, 12:08pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642 "2023-05-16T12:08:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 16, 2023, 12:08pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/1 "2023-05-16T12:08:02Z")

</div>

(0, 0, 0, .05), (3, 0, .1, .2, -.5), (6, 0, .1, .05), (9, 0)

Given the above data, I would like to render it as shown below.  
 ![LWPolyline5](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/9/69e8b8409a5a1201d0ab8e5a4c410c482a46eee6.png)

However, I encountered an issue with the thickness of the line, and it was more difficult to draw a line with a different thickness for each position.  
I would like to ask for help on this.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 16, 2023, 12:19pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/2 "2023-05-16T12:19:06Z")

</div>

lwpolyline?  
Last time I’ve seen this word is when I worked with AutoCAD decades ago 🙂

> [@1\_1](#):
>
> (0, 0, 0, .05), (3, 0, .1, .2, -.5), (6, 0, .1, .05), (9, 0)

What are these numbers about? Any chance to show the code, that produces the picture provided?

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 16, 2023, 12:20pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/3 "2023-05-16T12:20:26Z")

</div>

point format = (x, y, [start\_width, [end\_width, [bulge]]])  
The format looks like this.

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 16, 2023, 12:26pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/4 "2023-05-16T12:26:40Z")

</div>

[lwpolyline example](https://ezdxf.readthedocs.io/en/stable/tutorials/lwpolyline.html)  
There is an example document that will be helpful.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 16, 2023, 12:35pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/5 "2023-05-16T12:35:50Z")

</div>

> [@1\_1](#):
>
> and it was more difficult to draw a line with a different thickness for each position

Just out of curiousity, did you solve the processing of the `bulge` parameter, thus, you’re able to draw an arc with three.js with the given format of points?  
And it would be nice to provide the code you use to draw straight lines.

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 16, 2023, 12:45pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/6 "2023-05-16T12:45:28Z")

</div>

[draw arc](https://stackoverflow.com/questions/21415965/draw-arc-within-polyline-three-js)  
I solved drawing an arc while reading this article.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 16, 2023, 1:38pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/7 "2023-05-16T13:38:35Z")

</div>

Cool! What and how do you do to set lines’ width?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 16, 2023, 3:06pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/8 "2023-05-16T15:06:37Z")

</div>

As for line thickness, I have done something like it in Suica (which is a wrapper over Three.js) – a tube which path is defined via a function (or a spline) … and radius that is also defined by a function (or a spline).

Demos:

- [Open and closed tube](https://boytchev.github.io/suica/examples/tube-open-closed.html)
- [Tube spline](https://boytchev.github.io/suica/examples/tube-spline.html)
- [Dynamic tube spline radius](https://boytchev.github.io/suica/examples/tube-dynamic-spline-radius.html)
- [Dynamic tube](https://boytchev.github.io/suica/examples/tube-dynamic.html)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 16, 2023, 9:21pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/9 "2023-05-16T21:21:27Z")

</div>

That bulge was real fun to make 😅

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/4/5/45b4f0fe9b1991c810f5626c3d65ca8d03b42f93.png)

Didn’t implement thickness yet.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [May 17, 2023, 9:23am UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/10 "2023-05-17T09:23:04Z")

</div>

I could hardly imagine what will come next. Maybe bulge in a bulge?

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/d/9d9928fb2f3a4025241f8636285f7a947c4ac8a0.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 17, 2023, 10:03am UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/11 "2023-05-17T10:03:18Z")

</div>

Yeah, seems possible. The algo works 😅

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/b/7bf2fd5367cb58e114fbaaa4092da6b3c9420fa4.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 18, 2023, 1:15pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/12 "2023-05-18T13:15:11Z")

</div>

An option with fat lines (segments) 😓

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/f/afe1c4e4385f7c3afe73d20d038c6037c8ed8016.png)

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 18, 2023, 9:22pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/13 "2023-05-18T21:22:34Z")

</div>

Hmm… I can’t say I’m satisfied with the result of fat lines.

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/6/d6598e2baf7273171e8a6c139e8dec4d92ec98b0.png)

Maybe bended planes will be better 🤔

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 19, 2023, 12:19pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/14 "2023-05-19T12:19:17Z")

</div>

I think it’s enough of experimenting 😅  
Curved planes:

 ![изображение](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/b/1ba3b6af3345cf03eaffce94f77330b3ac50e3b1.png)

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 19, 2023, 12:49pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/15 "2023-05-19T12:49:21Z")

</div>

Wow what material did you make it with?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 19, 2023, 12:51pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/16 "2023-05-19T12:51:46Z")

</div>

Non-modified `MeshBasicMaterial`.  
All the lines is a single geometry of merged plane geometries.

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 19, 2023, 1:01pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/17 "2023-05-19T13:01:54Z")

</div>

Line thickness is only 1px in webgl, right? How did you implement line weight?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 19, 2023, 1:06pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/18 "2023-05-19T13:06:08Z")

</div>

They are not lines, they are narrow and long planes 🙂

---

<div class="post-metadata">

**Author:** ![1\_1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/1_1/32/34094_2.png) [@1\_1](https://discourse.threejs.org/u/1_1)\
**Post date:** [May 19, 2023, 1:47pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/19 "2023-05-19T13:47:08Z")

</div>

If you are drawing planes based on 3 lines, how did you handle the index?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [May 19, 2023, 1:54pm UTC](https://discourse.threejs.org/t/how-draw-lwpolyline/51642/20 "2023-05-19T13:54:14Z")

</div>

> [@1\_1](#):
>
> drawing planes based on 3 lines

Why does it have to be so? I just set heights for left side (start) and right side (end) of a plane geometry. There are always 4 points for a straight line.

[Next page](https://discourse.threejs.org/t/how-draw-lwpolyline/51642.md?page=2)