公告板技术

始终转向镜头

交互演示

交互演示 · 移动指针或点击画面，观察变化

公告板是每帧旋转以朝向镜头的平面四边形。血条、伤害数字、名字标签和远处的树木都可以使用公告板，使它们从任何角度看都一样清楚。示例中，左侧血条固定在角色身上，转动时会侧向镜头或呈现镜像；右侧血条则始终清晰可读。

适用场景

使用公告板制作悬浮标签、伤害数字，以及需要朝向镜头的精灵。可以选择完全朝向镜头的旋转，也可以为树木或角色选择保持直立、限制旋转轴的公告板。

实现示例

不依赖特定引擎的伪代码。请根据你使用的引擎调整函数和坐标约定。

label.worldRotation = camera.worldRotation
// 保持竖直的另一种写法：
direction = camera.position - tree.position
direction.y = 0
tree.lookAlong(normalize(direction))

常见错误

将镜头在世界空间中的旋转直接复制给子对象的局部变换，可能产生错误朝向。需要考虑父对象变换，以及四边形的前向轴。

延伸阅读

Three.js 手册 ↗

内容原作 Nicolas Zullo · 中文整理与交互改编