javascript - 从直线中删除线段？

Question

我正在尝试使用 Three.js 做一件特定的事情，并且花了很长时间来弄清楚我是否应该从头开始，或者我是否走在正确的轨道上。

我正在解析一个 gcode 文件，它本质上是一个巨大的文本文件，其中充满了 3D 打印机的位置和挤压数据。我依次阅读它并将所有位置作为顶点加载到 THREE.Geometry() 中，然后使用所有这些位置和顶点颜色创建一条线。

它看起来像这样:

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();

基本上，我知道哪些顶点对应该是不可见的(geometryArr 有一个用于此类事情的标志)，所以我知道我需要处理哪些顶点。

我尝试过的:* 删除有问题的顶点对 - 无论如何，这条线只是在下一组顶点之间绘制* 有第二条线，在它应该在的地方有一组透明(0不透明度)的线段 - 它们不可见并且没有效果(谁会想到它？)* 单独绘制每个线段 - 在尝试渲染 20,000 个线段，然后在修改后渲染另外 20,000 个线段(总共 40,000 个!)之后，我的计算机几乎回到了室温，性能下降得很慢。未达到预期结果。

我希望 THREE.Geometry 和 THREE.Line 具有某种从直线中删除特定线段的功能，但是真的吗？

<小时/>PS。如果不是，而且已经确认，我可能会将其移至 THREE.BufferGeometry 并使用着色器将某些线条渲染为不可见。可能需要一段时间，并希望避免走那么远。

非常感谢!

Answer 1

在 Three.js 中，有两种用几何图形绘制线条的方法。

1. 连续线:THREE.Line( geometry, material );
2. 分段线:THREE.LineSegments( geometry, material );

三个线段

THREE.LineSegments 类用一条线连接每两个后续顶点。因此，如果您想要此类的连续线，您需要复制中间的点。

这里举个例子来解释一下:

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 );

如果您使用这些点创建几何图形并使用THREE.LineSegments:

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

line = new THREE.LineSegments( geometry );

它看起来像这样:

.__.  .__.
1  2  3  4

如果你这样做:

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

line = new THREE.LineSegments( geometry );

它看起来像这样:

.__.__.__.
1  2  3  4

<小时/>

三行

THREE.Line 类的行为有所不同，并且始终使用连续线连接所有顶点。

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

line = new THREE.Line( geometry );

将绘制一条连接顶点数组中的点的连续线:

.__.__.__.
1  2  3  4

希望这能帮助您解决问题。