上周把首页的 3D 猪猪吉祥物从"能跑"折腾到了"有意思"，过程还挺曲折的，记录一下。
猪是灰色的
Three.js 本地化搞完之后，首页终于渲染出 3D 小猪了。结果打开一看，猪是灰色的。
模型文件里明明贴了纹理，blender 里打开也是有颜色的。控制台没有任何报错，纹理就是不加载。
折腾了一会儿才发现 —— CSP 安全策略把纹理加载给拦了。GLTFLoader 会用 blob: URL 加载纹理图片，但我的 CSP 只允许了 img-src 'self' data:，没加 blob:。浏览器直接静默拦截，连个报错都没有。
加上之后猪猪终于有颜色了。这个坑挺隐蔽的，CSP 导致的问题经常是静默失败，不报错。
做成水晶球
猪猪跑起来之后，盯着看了一会，外面那个圆形容器看着挺素的。突然想到可以做成水晶球的效果，里面飘点雪花，猪踩着雪地跑，像桌上摆的那种水晶球。
干了几件事：
- CSS 做了半透明玻璃边框 + 内发光 + 高光反射
- Three.js 里加了 120 个雪花粒子
- 猪脚下弄了个雪地
做完发现新问题：站点有四套主题，水晶球的灯光是固定白色的，切到暗夜主题整个球白得刺眼。于是用 MutationObserver 监听 data-theme 变化，灯光颜色、雪花色调、地面明度都跟着主题实时变。暗夜主题下雪花带点紫光，陶土主题地面偏暖色。
6.5MB 太大了
水晶球弄好了，打开 Network 面板看了一眼 —— 加载 8 秒多。pig.glb 有 6.5MB。
先上了 Cloudflare 边缘缓存，查了一下发现 Worker 没用 Cache API，每次都穿透到美国 S3。改了之后第二次访问 200ms 搞定，但首次还是 8 秒。
又加了 <link rel="preload">，让浏览器解析 HTML 时就开始下载，不用等 Three.js 加载完。省了几秒但还是不够。
根本还是文件太大。在 convert3d.org/app/compress 上做了压缩，第一次压完 605KB，结果猪不跑了，动画被压没了。
重新来，这次保留动画，用 gltf-transform 把原版动画移植到压缩版。最终 6.5MB → 639KB，动画完整。
结果又踩了个坑：Cloudflare 缓存了旧版 6.5MB 文件，线上怎么刷都还是大的。跑去 Dashboard 手动 Purge 了一次，然后给 URL 加上版本号做 cache bust。
优化前后对比：
| 首次加载 | 后续访问 | |
|---|---|---|
| 之前 | ~8s | ~8s（没缓存） |
| 之后 | ~1s（639KB + preload） | <200ms（CF 缓存 HIT） |
猪的内心独白
到这儿性能和视觉都可以了，但猪猪就是在那儿跑，跑得没啥意义。
然后想到一个好玩的 —— 文章数量等于猪猪的跑步公里数，每篇文章 100 米。2 篇就是 200m，42 篇就是 4.2km，差不多一个晨跑。
第一版做了个底座放在球下面显示里程，丑得不行，怎么调都不好看。后来想了想，干脆把里程放到猪头顶做成思考气泡，底座直接删掉。
气泡迭代了好几版：
- 药丸形状 —— 太像 tooltip
- 漫画风圆形 —— 还行但不够好
- SVG 云朵轮廓 + 两个小圆泡延伸到猪头方向 —— 这个对了
最后加了个小交互：hover 前显示"猜猜我在想什么"，鼠标移上去才出现"🏃 已跑 200m"。入场动画是小圆泡先弹出来，然后中圆泡，最后云朵。字体用了手写风，毕竟是猪的内心活动。
就这些
一天从灰色裸模折腾到现在这个状态，主要是几个节点：CSP 的坑、水晶球的想法、6.5MB 的压缩、思考气泡的迭代。技术上没啥高难度的东西，更多是在想怎么让这只猪看起来有意思一点。