CODEWITHSUNDEEP
javascriptthree.js
JonLim
JonLim

Reputation: 1413

Removing LineSegments from Line?

I'm trying to do a particular thing with three.js, and am having a hell of a time figuring out if I should just start this from the ground up or if I'm on the right track.

I'm parsing my way through a gcode file, which is essentially a giant text file full of position and extrusion data for 3D printers. I sequentially read through it and load all the positions into THREE.Geometry() as vertices, and I create a line using all of those positions and vertex colours.

Here's what it looks like:

var vis = new Visualizer();
vis.init();

if (typeof geometryArr == 'object' && geometryArr[0] != undefined) {
  colorScheme = [ "#0000ff", "#00ff00", "#d3d3d3", "#ff0000" ];

  var lastGeo = [0, 0, 0, false, 0];
  var currentGeo = [];

  var geometry = new THREE.Geometry();
  var lineMat = new THREE.LineBasicMaterial({
    color: 0xffffff,
    vertexColors: THREE.VertexColors,
    transparent: true,
    opacity: 1.0,
  });

  geometryArr.map(function(points, i) {
    currentGeo = points;

    if (currentGeo[3] == true && lastGeo[3] == true) {
      geometry.vertices.push( new THREE.Vector3( currentGeo[0], currentGeo[1], currentGeo[2] ) );
      geometry.colors.push( new THREE.Color ( colorScheme[ currentGeo[4] ] ) );
      lastGeo = currentGeo;
    } else {
      lastGeo = currentGeo;
    }
  });

  line = new THREE.Line( geometry, lineMat, THREE.LineSegments );

  vis.scene.add(line);
}

vis.render();
vis.animate();

Basically, I know which pairs of vertices should be invisible (geometryArr has a flag for this sort of thing), so I know which ones I need to take care of.

What I have tried: * Removing the offending vertice pairs - the line is simply drawn between the next set of vertices anyway * Having a second line, with a transparent (0 opacity) set of line segments where it should be - they aren't visible and have no effect (who'd have thunk it?) * Drawing each line segment individually - my computer has just about come back down to room temperature after trying to render 20,000 line segments, and then rendering another 20,000 after a modification (40,000 total!) and performance came down to a crawl. Not desired results.

I was hoping that THREE.Geometry and THREE.Line had some sort of functionality for removing specific line segments from a line, but does it?

PS. Should it not, and it is confirmed, I will probably do the work of moving this over into THREE.BufferGeometry and using shaders to render certain lines as invisible. Might just take a while and was hoping to avoid going that far.

Thank you very much!

Upvotes: 0

Views: 1130

Answers (1)

Wilt
Wilt

Reputation: 44326

There are two ways of drawing a line with a geometry in three.js.

  1. A continuous line : THREE.Line( geometry, material );
  2. A segmented line : THREE.LineSegments( geometry, material );

THREE.LineSegments

The THREE.LineSegments class connects every two subsequent vertices with a line. So if you want a continuous line with this class you would need to duplicate the points in the middle.

To explain it here an example:

v1 = new THREE.Vector3( 0, 0, 0 );
v2 = new THREE.Vector3( 10, 0, 0 );
v3 = new THREE.Vector3( 20, 0, 0 );
v4 = new THREE.Vector3( 30, 0, 0 );

If you make a geometry using these points and use THREE.LineSegments:

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.LineSegments( geometry );

It will look like this:

.__.  .__.
1  2  3  4

If you do :

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v2, v3, v3, v4 );

line = new THREE.LineSegments( geometry );

it will look like this:

.__.__.__.
1  2  3  4

THREE.Line

The THREE.Line class behaves differently and will always connect all vertices with a continuous line.

geometry = new THREE.Geometry();
geometry.vertices.push( v1, v2, v3, v4 );

line = new THREE.Line( geometry );

Will draw a continuous line connecting the points from the vertices array:

.__.__.__.
1  2  3  4

I hope this will help you solve your issue.

Upvotes: 3

Related Questions