# Creating Line Geometry Vertices with Breaks

**URL:** <https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282>\
**Category:** Questions\
**Tags:** vertices, lines, geometry\
**Created:** [May 16, 2020, 9:46pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282 "2020-05-16T21:46:31Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [May 16, 2020, 9:46pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/1 "2020-05-16T21:46:31Z")

</div>

Dear all, I’ve been experimenting with three.js for some time now, but I got stuck with this since December last year:

My goal is to visualize all lines of the given array “all1394c5s6”, where each subarray (each subarray is a 5-vertex/point line / eg. the first one [1,2,13,24,25]) is on one “slice of Z” with the given “spacing”. See for this [https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs\_v1.3.html](https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs_v1.3.html)

It all works as expected, but my code connects the last vertex/point of the previous line with the first vertex/point of the next line (eg. if we look at the first two lines [1,2,13,24,25], [1,2,14,23,25] then the last element “25” of the first array is connected with the first one “1” of the second array - and so on…). It is obvious why this happens. In order to being able to rotate the whole geometry with the “controls” I had to write it this way.

The first solution was to create an instance for each subarray/line, but this was so CPU consuming, that there was no smooth interaction possible. So I thought I might be able to achieve this this way, plus using some kind of alphas / opacity for the not wanted “inbeetween connections” explained before… See for this [https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs\_v1.4.html](https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs_v1.4.html) / Somehow “alpha” is not working and I am out of ideas…

Any help/idea/suggestion/different solution is greatly appreciated!

I was hoping to produce with three.js visuals for the next exhibition of my art project “Ars Combinatoria”. No deadline/date yet, possibly/hopefully some time end of the year/next year.

---

<div class="post-metadata">

**Author:** ![amitlzkpa](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/amitlzkpa/32/1735_2.png) [@amitlzkpa](https://discourse.threejs.org/u/amitlzkpa)\
**Post date:** [May 16, 2020, 11:14pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/2 "2020-05-16T23:14:36Z")

</div>

Maybe [LineSegment](https://threejs.org/docs/#api/en/objects/LineSegments) could do the job.  
It adds successive pairs of points as visible lines. Maybe you could use some logic to fill it in the right way with your 5 points array.

---

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [May 17, 2020, 1:27pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/3 "2020-05-17T13:27:03Z")

</div>

Thank you very much for this! Looks promising! Will try ASAP.

---

<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, 2020, 1:49pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/4 "2020-05-17T13:49:04Z")

</div>

@deeno `THREE.LineSegments()` + an indexed buffer geometry should do the trick.  
[https://threejs.org/examples/?q=indexed#webgl\_buffergeometry\_lines\_indexed](https://threejs.org/examples/?q=indexed#webgl_buffergeometry_lines_indexed)

---

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [May 25, 2020, 8:51pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/5 "2020-05-25T20:51:02Z")

</div>

Thank you all very much for the help!  
I finally could solve this:  
[https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs\_v1.7.html](https://www.koulaouzidis.com/ars-combinatoria/research/1394-on-xyz.threejs_v1.7.html)

**Follow-up Question** :  
Can LineSegment also give a certain part of the line another color?

---

<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 25, 2020, 9:08pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/6 "2020-05-25T21:08:47Z")

</div>

@deeno  
Could you provide a picture of how it has to look like?

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 26, 2020, 8:12am UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/7 "2020-05-26T08:12:41Z")

</div>

> [@deeno](#):
>
> Can LineSegment also give a certain part of the line another color?

Yes, the geometry has an attribute called **colors**. Assigning colors to this array and setting material **vertexColors: !0** will do the trick.

---

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [May 27, 2020, 5:24am UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/8 "2020-05-27T05:24:34Z")

</div>

Thanks so far. I managed to include vertexColors etc., so that my lines are now all BLUE (see line 206 of the sourcecode in my link on the previous post with …v1.8.html instead of v1.7… at the end - sorry I am making this so complicated, but my post got flagged/blocked twice because of posting links…). Next I tried to change line color on the fly, so I made a quick&dirty setup by adding lineNumber in the controls, and by changing this, I can see that the colors array changes (see line 168 of the sourcecode and the lines before / quick explanation: there are 1394 lines with 5 vertices each). Then I tried different ways of updating the canvas as explained in threejs-docs: #manual/en/introduction/How-to-update-things under “BufferGeometry” but I cant get it to work… Any hint?

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 28, 2020, 5:40am UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/9 "2020-05-28T05:40:03Z")

</div>

After rendering the object any changes made to geometry attributes must be followed by “…NeedsUpdate”.

**bufferGeometry:** object.geometry.attributes.color.needsUpdate = !0;  
**Geometry:** object.geometry.colorsNeedsUpdate = !0;  
**EDIT:** correction was made, thanx to _prisoner849_

Sorry, I don’t do bufferGeometry.  
Here is working example with regular geometry. [Line\_Seg\_Color\_Change.txt](https://discourse.threejs.org/uploads/short-url/2qr1qeGGgzN6ErElVLRttHS3T1S.txt)

---

<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 28, 2020, 8:30am UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/10 "2020-05-28T08:30:18Z")

</div>

> [@rrrr\_rrrr](#):
>
> object.geometry.attributes.colorsNeedsUpdate = !0;

I would use: `object.geometry.attributes.color.needsUpdate = true;`

---

<div class="post-metadata">

**Author:** ![rrrr\_rrrr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rrrr_rrrr/32/7697_2.png) [@rrrr\_rrrr](https://discourse.threejs.org/u/rrrr_rrrr)\
**Post date:** [May 28, 2020, 11:41am UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/11 "2020-05-28T11:41:32Z")

</div>

Thank you.  
Good thing, I do not use bufferGeometry.

---

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [May 30, 2020, 7:15pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/12 "2020-05-30T19:15:55Z")

</div>

@prisoner849 thanks for the info, all other suggestions or sources I found so far would give me an error. this one doesnt, so I hope/suppose it must be the correct way of doing this. still, unfortunately, I cant see a result… I am using this inside the control updateAll function on line 170 of my v1.8 example (find the link above). maybe it is the wrong position to call it?

---

<div class="post-metadata">

**Author:** ![deeno](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/deeno/32/11181_2.png) [@deeno](https://discourse.threejs.org/u/deeno)\
**Post date:** [June 4, 2020, 7:25pm UTC](https://discourse.threejs.org/t/creating-line-geometry-vertices-with-breaks/15282/13 "2020-06-04T19:25:31Z")

</div>

For anybody facing the same problem as I did:  
It was not the wrong position to call it, instead I changed the values of the color attribute and then did call “lineGeometry.attributes.color.needsUpdate = true;” but wasn’t aware I had to re-asign the changed values to the attribute - so “lineGeometry.setAttribute(‘color’, new THREE.Float32BufferAttribute(colors,3));” before calling the .needsUpdate did the trick!