Kage：一次京都深山寺庙的沉浸式夜间漫步

项目仓库：https://github.com/MengTo/kage
在线体验：https://mengto.github.io/kage/

核心概述

「Kage」在日语中意为「影」——影子、光影、隐秘之美。

这是一个五章节沉浸式夜间漫步体验，穿过虚构的京都深山寺庙，全部用 Three.js 实时渲染，结合分层电影级生成图像。

核心亮点：

• 五章夜游：山門 → 庭園 → 手業 → 夜之儀式 → 余韻
• 程序化构建：寺庙、鸟居、月亮、天气、雾气全部实时生成
• 无构建步骤：单 HTML 文件，Three.js r149 直接引入
• 分层渲染：3D 世界 + AI 生成画面 + Alpha 前景元素

技术架构：单文件 WebGL 体验

分层渲染策略

程序化构建元素

• 寺庙建筑、鸟居、石灯笼
• 月亮（朱红色大型圆月）
• 地形、天气（雨、落叶、余烬）
• 大气效果（雾气、bloom）

五章夜游

设计哲学十大观点

1. 单文件即完整产品 — index.html 包含全部代码，不是演示而是交付物
2. 分层渲染而非单一画布 — 拼贴式深度，叠加产生电影感
3. 滚动即叙事 — 相机路径由滚动驱动，每章节像新构图镜头
4. 程序化即无限细节 — 不依赖 3D 资产，却达到资产级丰富度
5. 克制的后处理 — bloom、胶片颗粒、晕影为氛围服务
6. 日式留白哲学 — 慷慨负空间，竖排日文，创造呼吸
7. AI 作为创作伙伴 — GPT Image 2 扩展创意边界，非替代创意
8. 无构建工具的现代开发 — vendored Three.js，Python 服务静态文件
9. 可访问性不是事后想法 — 响应式布局、减少动画偏好从一开始就内置
10. 体验即设计文档 — PROMPT.md 是完整设计规范，而非使用说明

实战教程

本地运行

git clone https://github.com/MengTo/kage.git
cd kage
python3 -m http.server 4173 --bind 127.0.0.1

访问 http://127.0.0.1:4173/

发布到 GitHub Pages

1. 推送仓库到 GitHub
2. Settings → Pages → 选择 main 分支
3. 访问 https://username.github.io/kage/

配色方案

结语

Kage 展示了单文件可以承载完整体验——不需要框架、不需要构建工具，只需要对体验的清晰愿景，以及将愿景实现的技术能力。

程序化生成 + AI 辅助 = 无限细节。滚动即叙事。克制即品质。