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

实例化图标

一千五百个带圆角的图标漂浮在地表上方,始终正对镜头。 点一下锁定朝向,就能看到面片固定后的样子,可用来验证公告板是否真的在工作。

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

朝向就是相机的旋转

公告板的本质是「面片的法线永远指向相机」。与其对每个实例做 lookAt,不如直接复制 camera.quaternion, 一次四元数拷贝就完成了全部朝向计算。

代价是相机一动就要重算全部实例矩阵。一千五百个实例每帧写九万个浮点, 桌面端完全够用;上万级时应该把这件事交给顶点着色器, 用相机矩阵在 GPU 侧展开面片,CPU 就不再参与。

项取值说明
实例数1500单次绘制调用
贴图128 × 128canvas 画的圆角框与中心点
尺寸0.3 – 1.0世界单位,随滑杆调整
深度写入关闭避免透明边互相遮挡

图标为什么要自己画

地图符号经常是设计稿里的图片,但示例里用 canvas 画了一个圆角矩形加中心圆点。 这样做有两个好处:不依赖外部文件,任何环境都能跑; 圆角与描边宽度在代码里一目了然,改配色只需要改两个字符串。

双重透明会发灰。贴图本身带 alpha,材质又开了 transparent,叠加顺序不同时边缘会变暗。 把 depthWrite 关掉、按距离排序,或者干脆用 alphaTest 做硬边,观感更稳定。