Performance THREE.js提高了拖动选择的性能

我必须根据坐标创建数百万个向量。我使用了三个.js线段来实现同样的效果，这在性能上是非常好的。但要在拖动时实现区域选择，fps将降至0。这是因为我正在创建要添加到Object3D（helperObj）中的许多单独线段，SelectionBox可以使用这些线段。尽管我并没有将Object3D（helperObj）添加到场景中，但由于循环中有太多的绘制调用，这导致了性能问题。为了显示线，我使用BufferGeometry并将坐标推到循环中，然后在循环结束后立即添加它们（工作示例中的lineGeometry）

我需要一些数据，我正在helperObj的userData中添加这些数据来执行一些操作。是否有其他方法可以在不创建多条线段的情况下添加userData

工作示例：

---

有人能帮忙吗？

我建议您创建一个包含数百条线的

线段

对象，然后使用

mesh.geometry.setDrawRange（0，最大值）更改实际渲染的线数。看一下演示的代码。您可以动态更新每个顶点的起点和终点位置，然后使用
setDrawRange（）
显示/隐藏其中一些顶点。这比为每一行构建一个新的
线段
要有效得多。我在绘制这数百行时没有任何问题。使用lineGeometry.setAttribute（'position'，new THREE.Float32BufferAttribute（positions，3））；而且速度相当快。但在框选择中，我需要这些单独的行数据，如下所示：。在本例中，它运行良好，因为它只有200个立方体。我需要选择框中每一行的行数据，以便在我的应用程序中执行一些操作。有没有其他方法可以实现框选择和获取单个线条数据？我建议在单个索引的
线段
几何图形中创建一个从ID到特定索引的索引。然后可以使用ID访问该索引，从中可以执行许多操作。减少数据和添加地图并非易事（这就是为什么我不将此作为一个完整的答案…），但其结果将是通过ID更快地访问几何体的特定部分。能否给出一个如何创建索引线段的示例。我不理解Three.js给出的标准示例
/** code causing performance issue starts**/
   const geo = new THREE.InstancedBufferGeometry();
   geo.setAttribute('position', new THREE.Float32BufferAttribute([x1, y1, 0, x2, y2, 0], 3));
   const helperLine = new THREE.LineSegments(geo, hoveredMaterial);
   helperLine.visible = false;
   helperLine.userData = "row:"+i;
   helperObj.add(helperLine);
/** code causing performance issue ends**/