时间戳

首页 > 解决方案 > THREE.js 提高了拖动选择的性能

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

问题描述

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

/** 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**/

我需要一些我在 helperObj 的 userData 中添加的数据来执行一些操作。有没有其他方法可以在不创建多个 LineSegments 的情况下添加 userData。

工作示例：https ://codepen.io/raksha-jain/pen/JjWPVbK

有人可以帮忙吗？

标签： performancethree.jsselection

解决方案

推荐阅读