Javascript 是否从直线中删除线段？

我正试图用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不透明度）的线段-它们不可见并且没有效果（谁会发出砰砰声？） *单独绘制每个线段-在尝试渲染20000个线段后，我的计算机几乎恢复到室温，然后在修改后再渲染20000个线段（总共40000个！），性能下降到爬行状态。不是期望的结果

我希望

THREE.Geometry

和

THREE.Line

具有某种功能，可以从一条直线上删除特定的线段，但它有吗

---

PS.如果没有，并且已经确认，我可能会将其移动到

THREE.BufferGeometry

，并使用着色器将某些线渲染为不可见。可能需要一段时间，希望避免走那么远

---

多谢各位

在three.js中，使用几何图形绘制直线有两种方法

连续线：

分段线：

三.线段

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

如果使用这些点并使用三条线段创建几何图形：

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

line = new THREE.LineSegments( geometry );

它将如下所示：

.__.  .__.
1  2  3  4

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

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

---

我希望这将帮助您解决您的问题。

在three.js中，有两种方法可以使用几何体绘制直线

连续线：

分段线：

三.线段

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

如果使用这些点并使用三条线段创建几何图形：

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

line = new THREE.LineSegments( geometry );

它将如下所示：

.__.  .__.
1  2  3  4

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

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

---

我希望这将帮助您解决您的问题。

如果我能完全理解您的问题，我想我可以帮助您。为什么要首先添加这些顶点？你能不能先跳过将它们添加到几何体中？@Wilt:如果不清楚，我表示歉意-我将顶点添加到一个

THREE.geometry

对象中，因为在那之前，它只是一个用X Y Z信息构建的数组。除非有更好的方法来划清界限和/或其他什么？我理解这一部分。但还有一部分我不知道：你在几何体中添加了一些点，你想再次删除这些点，对吗？但是为什么不先跳过添加它们呢？我不知道你的问题在哪里…@威尔特：我发现即使不将它们添加到几何体中，并使用该几何体，也会在它们之间画出线。但是现在它只使用我删除的点之前和之后的点。你使用的是什么版本的three.js？如果我能完全理解你的问题，我想我可以帮你。为什么要首先添加这些顶点？你能不能先跳过将它们添加到几何体中？@Wilt:如果不清楚，我表示歉意-我将顶点添加到一个

THREE.geometry

对象中，因为在那之前，它只是一个用X Y Z信息构建的数组。除非有更好的方法来划清界限和/或其他什么？我理解这一部分。但还有一部分我不知道：你在几何体中添加了一些点，你想再次删除这些点，对吗？但是为什么不先跳过添加它们呢？我不知道你的问题在哪里…@威尔特：我发现即使不将它们添加到几何体中，并使用该几何体，也会在它们之间画出线。但是现在它只使用我删除的点之前和之后的点。你使用的是什么版本的three.js？太棒了，谢谢你的回答。我将尝试一下，我很确定这就是它，但需要澄清的是：我应该在几何体中添加成对的顶点，并使用

3.LineSegments

来连接所有这些对？@JonLim就是这样！工作得很漂亮！我必须对我的代码做更多的调整，否则这太棒了。非常感谢你！太棒了，谢谢你的回答。我将尝试一下，我很确定这就是它，但需要澄清的是：我应该在几何体中添加成对的顶点，并使用

3.LineSegments

来连接所有这些对？@JonLim就是这样！工作得很漂亮！我必须对我的代码做更多的调整，否则这太棒了。谢谢你