# 彩虹赛道：Pobb 与 Aubie 的 3D 化

2026-10-17。范围为正式网站的赛道角色。角色依据 App `Assets/IslandPet/prompts.md` 与网站现有 `pobb.png`、`aubie.png`，通过 Three.js 程序几何创建；没有调用图片、视频或模型生成服务。原生 App 动作包及其固定 Island 锚点不变。

- Pobb：深海军蓝、奶油色脸腹、珊瑚色耳内和鼻子，背部至尾部恰好四枚青色护鳞。
- Aubie：紫色茄子轮廓、深蓝学士帽、金色流苏、圆眼镜和左侧暖红书本。
- 沿前进方向奔跑，左右交替抬脚、摆臂，身体跟随弯道转向，追逐中小幅横向移动；靠近道具时对齐拾取位置。
- 视线指向前方道路：身体、头和瞳孔分层朝向，不能一直正面对着镜头倒退跑。保留真实追逐视角，并用多角度造型检查确认脸部与配饰。
- 拾取后小跳，尾巴或流苏随动作摆动，偶尔眨眼。全部动作使用赛道的同一模拟时钟，暂停、离屏、后台与减少动态均冻结。
- 每个关节内部按材质合并几何，材质与基础形状共享。取消网页对两张竞速 sprite atlas 的请求，模型无纹理、无外部 glTF 请求。

验证计划：正面/侧面/背面造型、奔跑分帧、两处弯道方向与瞳孔变化、真实碰撞投递、手机画面、暂停及减少动态、稳定资源数量、首屏资产预算、语法与 SEO/i18n 检查。结果完成后附在本文。

## 最终实现

`home-race-pets.js` 管理造型、关节、步态与视线；`home-race.js` 管理位置、赛道切线、拾取目标及生命周期。模型朝向为本地 `-Z`，使用原本的后方追逐镜头。

- 角色向前奔跑，领先位置交替变化；分别在左右车道内做小幅追逐，在临近拾取点时对齐道具。
- 身体朝速度方向转动；头部承担一部分转向，瞳孔补足朝向，并看向前方 18 个世界单位的道路目标。保留轻微眨眼。
- 跑步由实际前进距离驱动，左右脚交替支撑。支撑脚前后回摆时补偿关节高度，避免滑成漂浮姿态；手臂反向摆动，书本随手臂，尾巴与流苏随步伐摆动。
- 拾取后短跳，接地阴影随道路倾斜并随跳跃减淡。位置、步态、眨眼、摆动和投递共享赛道时钟。
- 两个角色合计 43 个 mesh、35,214 个三角形、40 个实际使用 geometry、0 张纹理。每个关节的固定细节按材质合并，共用基础形状和材质。没有新增 3D 引擎、解码器或 glTF 文件。
- 首页不再请求 `pobb-walk.webp`、`aubie-walk.webp` 与 `racers.json`。两张旧图集合计 484.5 KiB 压缩文件、约 12.4 MiB 解码 RGBA；旧资产留在仓库中供设计原型使用。
- 首屏图片从约 699 KiB 减少至 214 KiB；CI 图片上限收紧至 260 KiB。完整竞速脚本（包含 Three.js）约 192 KiB gzip，仍低于 230 KiB 上限。

造型与动作证据见 `docs/design-previews/race-pets-3d-20261017/`，测试结论见 `docs/regression/race-pets-3d-20261017.md`。