How to draw disconnected lines? (Array of lines)

Good morning everyone, I’m new at three, at js and here too. I am not fluent in English, so I apologize for any mistake.
I’m trying to draw disjoint lines in three.js however the only thing I found was on solid lines.
It is necessary to divide a screen recursively in half so that the first division generates 2 new screens, and these new screens are divided and continue to a stop criterion. It turns out that I can only draw lines together that are interconnected.
How would I design an array of rows, where at each iteration I could add a new row?

var material = new THREE.LineBasicMaterial({ color: 0x000000 });

var geometry = new THREE.Geometry();

geometry.vertices.push(new THREE.Vector3(0, -height/2, 0));
geometry.vertices.push(new THREE.Vector3(0, height/2, 0));
geometry.vertices.push(new THREE.Vector3(0, 0, 0));
geometry.vertices.push(new THREE.Vector3(width/2, 0, 0));

var line = new THREE.Line(geometry, material);


renderer.render(scene, camera);

Use LineSegments for this.



@Mugen87 updated your fiddle since I think @viniciozz is trying to draw lines to divide up the screen.


Thanks for you help man, i got to do my job :slight_smile:

thanks! I succeeded

1 Like