THREE.js 实现拖拽框选时百万级线条场景FPS骤降的优化方案咨询

百万级独立LineSegments实例的创建开销，和是否挂载到场景、是否设置为不可见没有直接关系。循环过程中每次调用new THREE.InstancedBufferGeometry()、new THREE.LineSegments()都会触发WebGL显存分配、场景图节点指针挂载、垃圾回收标记的固定开销——哪怕把所有创建的对象都存在脱离场景的Object3D下，百万次循环产生的内存碎片、主线程遍历开销依然会把执行队列占满，直接导致FPS降到0。

完全去掉循环内的独立对象创建逻辑，所有数据采用预分配TypedArray批量存储，仅生成单个LineSegments实例承载所有待检测线条，整体对象创建次数压缩到个位数：

1. 预分配内存替代循环内实例创建 #

• 循环启动前根据总线条量，按需要的长度申请连续的TypedArray内存块：
  • 位置数组：按每条线2个顶点、每个顶点3个坐标的规则，申请长度为总线条数 * 6的Float32Array，存储所有线段的端点坐标
  • 业务关联数组：按每条线1个业务索引的规则，申请长度为总线条数的Uint32Array，存储原本要挂在独立对象userData里的行号等自定义信息
• 循环遍历过程中仅做数据写入操作，不调用任何Three.js类的构造函数，不创建任何独立场景对象
• 所有循环结束后，一次性将预分配的TypedArray绑定到单个BufferGeometry，生成唯一一个LineSegments实例挂载到helperObj上

2. 业务数据关联逻辑调整 #

不需要将业务信息挂载到独立对象的userData上，直接建立线段索引与业务数据的一一映射关系：

• 按照写入顺序，第i条线段对应位置数组的i*6 ~ i*6+5偏移段，对应业务关联数组的第i个元素
• 后续检测到某条线段命中时，通过检测结果返回的顶点位置算出对应的线段索引，直接读取业务关联数组的对应值，即可拿到原本存在userData里的行号信息

3. 适配框选检测逻辑 #

原生SelectionBox的逐节点遍历检测逻辑完全不适合百万级对象的场景，需要做批量适配：

• 把原本逐独立对象的相交检测，替换为基于线段索引的批量相交判定，直接遍历单几何体里存储的所有线段端点坐标，计算线段和选框、射线的相交关系
• 针对超大规模场景可叠加空间网格索引，预先将每条线段按照空间位置划分到对应网格桶，选框检测时只遍历覆盖范围内的网格桶，将百万次的全量遍历压缩到几十次的局部检测

核心替换代码示例 #

// 循环外预分配全量内存，不做重复对象创建
const totalLineCount = 1000000;
// 存储所有线段端点坐标
const posBuffer = new Float32Array(totalLineCount * 6);
// 存储每条线对应的业务行号，替代原userData挂载逻辑
const rowIndexMap = new Uint32Array(totalLineCount);

// 循环内仅做数据写入，不创建任何Three.js实例
for (let i = 0; i < totalLineCount; i++) {
  const offset = i * 6;
  // 写入当前线段的两个端点坐标
  posBuffer[offset] = x1;
  posBuffer[offset + 1] = y1;
  posBuffer[offset + 2] = 0;
  posBuffer[offset + 3] = x2;
  posBuffer[offset + 4] = y2;
  posBuffer[offset + 5] = 0;
  // 写入当前线段对应的业务行号，和线段索引一一绑定
  rowIndexMap[i] = i;
}

// 循环结束后仅创建1次几何体和LineSegments实例
const detectGeo = new THREE.BufferGeometry();
detectGeo.setAttribute('position', new THREE.BufferAttribute(posBuffer, 3));
const detectLines = new THREE.LineSegments(
  detectGeo,
  new THREE.LineBasicMaterial({ visible: false })
);
helperObj.add(detectLines);

• 绝对不要在循环内调用任何new THREE.*的构造方法，尤其是几何体、材质、场景对象的创建——哪怕对象不挂载到场景，堆内存分配、GC标记的开销依然会阻塞主线程
• 检测逻辑不需要遍历场景下的所有子节点，基于单个LineSegments的几何体数据做批量相交计算即可，场景图遍历开销可以忽略不计
• 如果必须兼容原有SelectionBox的接口，可给单个LineSegments实例扩展自定义的框选相交方法，内部实现空间索引检测逻辑，不需要额外挂载大量独立对象

内容的提问来源于stack exchange，提问作者Raksha Jain