Studio · 3D 个人花园
⭐ 精选/play/ 子路径下的 3D 互动场景。改造自 Bruno Simon 的开源 portfolio，视觉转向水彩 anime 风格，可以开车撞 DAISY 字母。
📅 2026Three.jsCannon.jsGLSLGLTFMatcap
这是什么
打开 /play/ 你会看到：一辆水彩风格的小车，停在粉紫色的场景中央，周围散落着 DAISY 5 个字母的 3D 文字。按 WASD 可以开车，撞到字母会弹飞，空格跳跃。
这不是游戏，是个人作品集的 3D 形态 —— 每个区域对应一个项目 / 一段信息，开到那里触发显示。
技术栈
- Three.js 渲染层
- Cannon.js 物理引擎（车辆动力学 + 刚体碰撞）
- 自定义 Matcap Shader 实现 anime 扁平风
- Canvas 动态生成 matcap 贴图 基于 ANIME_PALETTE 调色板
- 反向外壳描边 实现 toon outline
改造点
从 Bruno → Daisy
| 项 | Before（Bruno） | After（Daisy） |
|---|---|---|
| 字母 | BRUNO | DAISY |
| Matcap | 真实感（米色 / 木纹 / 金属） | 水彩粉紫（13 色 ANIME_PALETTE） |
| 主角 | Bruno 的 3D 自画像 | Meshy AI 生成的 Lolita anime |
| SEO meta | brunosimon.me | daisyle.cn |
| information 贴图 | Twitter / LinkedIn / GitHub | 微博 / 即刻 / GitHub（Phase B 填充） |
技术难点
最大的坑是 Object3D.traverse() 在迭代中改 children 导致的 outline 级联 bug，单独写成了一篇《Bruno → Daisy 改造日记》文章。
状态
- [x] 视觉改造（材质 + 字母 + 光照）
- [x] 主角接入（Meshy avatar toon shading）
- [ ] 清理 Bruno 残留的胸像雕塑
- [ ] information 区贴图替换
- [ ] Sobel 边缘后处理
- [ ] 上线到
/play/（Nginx 反代，Phase D）