首页 / three.js / 使用示例
点精灵公告板
6000 个设施点按极坐标散布,每个点用一张代码画的径向渐变贴图渲染。 无论相机怎么转,这些圆点都正面朝向视线,这是点精灵的本职。
源码与运行效果
贴图怎么来的
一个 64 × 64 的 canvas,画上从中心向边缘 alpha 递减的径向渐变,
再用 CanvasTexture 包成纹理。中心一段保持完全不透明,
让点有实心感;外圈渐隐,避免密集处出现锯齿边缘。
alphaTest 设为 0.04 是个小技巧:完全透明的像素在片元阶段就被丢弃,
不会写进深度缓冲,这样后面的点才能透过来。若只开 transparent
而不设 alphaTest,密集区域会出现深浅不一的黑边。
| 参数 | 取值 | 作用 |
|---|---|---|
size | 0.42 | 世界单位下的点直径,随距离缩放 |
sizeAttenuation | true | 远处点变小,符合透视 |
depthWrite | false | 点之间不做深度排序 |
vertexColors | true | 按类别上色,红 12%、黄 22%、蓝其余 |
点的数量上限
单个 Points 对象可以稳定跑到几十万级,瓶颈在填充率而不是顶点数。
点越大、屏幕像素越多,GPU 越吃力。项目里常按缩放级别分层:
缩小视角只显示重要设施,放大后再把长尾点位加进同一个缓冲的尾部,配合
drawRange 控制可见数量。
公告板不是精灵。Sprite 每个对象都是一次独立绘制调用,
几千个就会拖慢帧率;Points 一次绘制调用画完全部点。
需要每个点独立尺寸、旋转、颜色时,才考虑自定义着色器或实例化面片。