经纬志
首页 / three.js / 使用示例

点云拾取

两万个三维散点分属三处采样区,鼠标靠近时用一个绿色圆环圈住最近的那一个, 并读出序号与世界坐标。阈值滑杆把「多近算命中」交给使用者感受。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

阈值是唯一的关键参数

点没有面积,射线不可能正好命中。three.js 为点提供了 Raycaster.params.Points.threshold,表示「离射线多近算命中」, 单位与世界坐标一致。

阈值和点的屏幕尺寸应当匹配:相机拉近时点变大,阈值也该跟着放大, 否则会出现「明明点就在鼠标下面却拾取不到」。示例给了滑杆, 可以直观看到阈值过小与过大两种失准状态。

项取值说明
点数20000三处高斯团叠加
点尺寸0.11开启距离衰减
阈值范围0.1 – 1.6约等于点直径的 1 到 14 倍
命中索引hit.index直接对应顶点序号

圆环为什么能贴合

圆环是一个普通的 RingGeometry 面片,命中后把位置移到点的坐标, 再把四元数设成相机的旋转,它就永远正对镜头。 这一步与公告板的处理完全一致,只是数量只有一个。

点云拾取只适合交互级规模。二十万点以上,每次移动都遍历全部顶点, 主线程会明显卡顿。可行方案是把点按八叉树分块, 先用包围盒粗筛,或者把拾取逻辑挪到 GPU 用像素读回。