首页 / three.js / 使用示例
点云拾取
两万个三维散点分属三处采样区,鼠标靠近时用一个绿色圆环圈住最近的那一个, 并读出序号与世界坐标。阈值滑杆把「多近算命中」交给使用者感受。
源码与运行效果
阈值是唯一的关键参数
点没有面积,射线不可能正好命中。three.js 为点提供了
Raycaster.params.Points.threshold,表示「离射线多近算命中」,
单位与世界坐标一致。
阈值和点的屏幕尺寸应当匹配:相机拉近时点变大,阈值也该跟着放大, 否则会出现「明明点就在鼠标下面却拾取不到」。示例给了滑杆, 可以直观看到阈值过小与过大两种失准状态。
| 项 | 取值 | 说明 |
|---|---|---|
| 点数 | 20000 | 三处高斯团叠加 |
| 点尺寸 | 0.11 | 开启距离衰减 |
| 阈值范围 | 0.1 – 1.6 | 约等于点直径的 1 到 14 倍 |
| 命中索引 | hit.index | 直接对应顶点序号 |
圆环为什么能贴合
圆环是一个普通的 RingGeometry 面片,命中后把位置移到点的坐标,
再把四元数设成相机的旋转,它就永远正对镜头。
这一步与公告板的处理完全一致,只是数量只有一个。
点云拾取只适合交互级规模。二十万点以上,每次移动都遍历全部顶点, 主线程会明显卡顿。可行方案是把点按八叉树分块, 先用包围盒粗筛,或者把拾取逻辑挪到 GPU 用像素读回。