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

点精灵公告板

6000 个设施点按极坐标散布,每个点用一张代码画的径向渐变贴图渲染。 无论相机怎么转,这些圆点都正面朝向视线,这是点精灵的本职。

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

贴图怎么来的

一个 64 × 64 的 canvas,画上从中心向边缘 alpha 递减的径向渐变, 再用 CanvasTexture 包成纹理。中心一段保持完全不透明, 让点有实心感;外圈渐隐,避免密集处出现锯齿边缘。

alphaTest 设为 0.04 是个小技巧:完全透明的像素在片元阶段就被丢弃, 不会写进深度缓冲,这样后面的点才能透过来。若只开 transparent 而不设 alphaTest,密集区域会出现深浅不一的黑边。

参数取值作用
size0.42世界单位下的点直径,随距离缩放
sizeAttenuationtrue远处点变小,符合透视
depthWritefalse点之间不做深度排序
vertexColorstrue按类别上色,红 12%、黄 22%、蓝其余

点的数量上限

单个 Points 对象可以稳定跑到几十万级,瓶颈在填充率而不是顶点数。 点越大、屏幕像素越多,GPU 越吃力。项目里常按缩放级别分层: 缩小视角只显示重要设施,放大后再把长尾点位加进同一个缓冲的尾部,配合 drawRange 控制可见数量。

公告板不是精灵。Sprite 每个对象都是一次独立绘制调用, 几千个就会拖慢帧率;Points 一次绘制调用画完全部点。 需要每个点独立尺寸、旋转、颜色时,才考虑自定义着色器或实例化面片。