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

点云散点

两万四千个点聚成一块扁椭球,颜色由高度决定。这是点云、站点分布、采样数据的共同画法: 一份位置属性,加一份颜色属性。

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

说明

点的位置在球体内均匀取随机数,再单独把 Y 轴乘 0.38,压成一团扁球。 颜色用 setHSL 生成:色相从青蓝过渡到橙黄,明度随高度略升。 每写一个点,位置与颜色各填三个浮点数。

PointsMaterial 的 size 是场景单位,不是像素。 sizeAttenuation 开启后,离相机越远点越小,符合透视。 关闭后所有点保持固定屏幕大小,适合做不随距离缩放的标记点。

设置取值理由
顶点数24000足以形成团块感,又不会让弱显卡明显掉帧
点径0.09点云半径 9.5 时的视觉密度合适
opacity0.9略微透出后层,空间层次更明显
depthWritefalse透明点不写深度,避免互相遮挡出黑边
缓冲用途静态位置与颜色只写一次,不需要 DynamicDrawUsage

点云为什么适合用 Points

如果用 Mesh 为每个点建一个球,两万四千个对象会产生两万四千次绘制调用, 帧率会直接掉到个位数。Points 把所有点装进一个 BufferGeometry,一次绘制调用全部画完,这是量级上的差别。

点云如果来自激光扫描,通常还带强度与分类。把强度映射成颜色、把分类映射成不同色带, 用的仍是同一条路径:多写一个属性,在材质或着色器里读它。

换成真实数据时

真实点云动辄百万点。第一步应当先抽稀或在服务端分块,而不是把全部点塞进浏览器。 十万点以内,Points 通常还能保持流畅;再往上就要考虑分块加载、 视锥裁剪与层级细节。

另外,坐标要先用局部原点归零。经纬度直接乘常数转成米后,数值可能达到上百万, Float32 的精度只剩半米左右,点会呈现明显的抖动与分层。

颜色属性要显式开启。PointsMaterial 默认不读取顶点颜色。 忘记设置 vertexColors: true 时,点会全部显示成材质的 color, 看起来像颜色数据没有生效。