Creating Line Geometry Vertices with Breaks

Questions
, ,
1

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

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 / 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.

2

Maybe LineSegment 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.

1 Like
3

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

4

@deeno THREE.LineSegments() + an indexed buffer geometry should do the trick.
https://threejs.org/examples/?q=indexed#webgl_buffergeometry_lines_indexed

1 Like
5

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

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

6

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

7

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

1 Like
8

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?

9

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

10

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

2 Likes
11

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

12

@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?

13

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!