Kage：一个 HTML 文件里的京都山寺夜游——滚动控制器、AI 贴图与 Three.js 实时渲染的取舍

前几天在 X 上看到一条帖子：有人用一段提示词让 AI 生成了京都山寺的 3D 世界。转发过千，评论区不少人说“这不比那些套壳 AI 项目有意思多了”。顺着线索找到 GitHub 上的 Kage 项目，目前已经有 1400 多个 Star。

Kage 做的事情用一句话说：一个 HTML 文件，把 AI 生成的内容和 Three.js 实时渲染融合在一起。作者 Meng To 是设计师出身，写过《Design+Code》。打开页面，没有菜单，没有按钮，直接就是一片深蓝色的夜晚：山门、石阶、灯笼，远处亮着灯的寺庙。唯一能做的就是滚动鼠标，在一座京都山寺里夜游。

我第一次打开时也带着怀疑。一个 HTML 能做成什么样？滚一下滚轮，镜头沿着山间小道向前推进。穿过山门，两侧石灯一盏盏亮起，脚下雾气渐渐消散。雨开始落下，树叶随风飘动。再往里走，寺庙屋檐进入画面，山脊上挂着一轮朱红色的月亮。越走雨越大，山下的灯光也一盏接一盏地亮起来——直到这时，整个夜游的节奏才算铺完。

整个页面只有滚动这一种交互方式，但体验并不单调。与其说是在浏览网页，不如说是在看一部可以“走进去”的交互式电影。

滚动不是事件，而是相机位置的控制器

Kage 里没有手柄、没有键盘映射，也没有点击跳转。滚动滚轮就是唯一的输入。相机沿一条预先设好的路径前进，滚多少就走多少，速度由你控制。这条路径从山门一直延伸到寺庙，每个位置的视角都是事先摆好的——你走到哪，镜头就对准哪。

这种设计最直接的好处是没有理解成本。用户不需要学习任何界面，滚轮的自然隐喻就是前进。缺点也很明显：交互模式只有一条线，你无法停下来转头看侧面，也无法探索路径之外的空间。它更像一段有摄影指导的轨道镜头，而不是一个开放世界。

实时渲染，不是循环视频

寺庙、山门、雨、雾、落叶，这些元素都是 Three.js 在浏览器里实时计算出来的。滚动的时候，雨的方向和落叶的轨迹会随时间和视角变化，光影也在运行中不断更新。它和预先渲染好的视频有本质区别：每帧画面都是当前状态的计算结果，而不是播放固定帧。

这也是 Kage 能营造“在场感”的核心。如果只是一段 360 度视频，滚动只能控制播放进度，而场景里的动态细节是死的。实时渲染让场景对输入保持了连续响应，哪怕这种响应只是相机位移，也足以让人感觉到“自己是在走，而不是在看”。

AI 生成素材，透明贴图叠进 3D 场景

场景里的视觉素材怎么来的？作者用的是 GPT Image 2 生成场景图板和前景素材，再把它们作为透明图层放进 3D 世界。作者把整体构图拆成五个部分：山门、静庭、匠艺、余晖和宣言。颜色刻意压得很低——近黑、藏蓝、暖琥珀、骨白，再加少量朱红。这些低饱和度的颜色一层层叠上去，配合暗部细节，就把夜间山寺的安静气氛做出来了。

这种“AI 出图 + 透明贴图 + 3D 场景”的组合有它的实际意义：相比全三维建模，成本低很多；相比纯图片，又多出了相机运动带来的透视变化。但它也有前提：透明贴图本质上是二维平面。它只能在固定相机路径下保持视觉正确，一旦允许自由旋转视角，平面感就会立刻暴露。Kage 之所以选择预设路径，很大程度上是因为这个约束，而不是单纯为了让操作简单。

零构建，一个 HTML 直接跑

技术上没有什么神秘的东西。Three.js 版本 r149，直接打包在仓库里，没有 React，没有 npm，没有构建工具，也不需要环境变量。打开 HTML 就能跑，本质上是一个静态网站。

想在本地运行，只需要在项目目录下起一个 HTTP 服务：

python3 -m http.server 4173 --bind 127.0.0.1

然后浏览器访问 http://127.0.0.1:4173/ 就能进山。作者还挂了一个在线版本，可以直接打开。整个页面没有埋分析脚本，源码很干净，想看素材是怎么拼接的，直接翻项目文件就行。

复现和使用的注意事项

如果你打算仿照它做一个类似的夜游场景，有两点要先知道。

第一，素材不能直接用。需要拿着项目里的 PROMPT.md 重新生成一遍，再按同样的分层思路贴进自己的场景里。这个 PROMPT.md 就是整套视觉的“配方”。

第二，硬性依赖 WebGL。浏览器不支持 WebGL 的话，画面会一片空白。作者提供了“减弱动画”的选项，给容易 3D 眩晕的人留了一条退路，但即便开启，也不能保证所有低端设备都流畅。

适用边界和取舍

Kage 的本质是一个演示项目，适合放在个人网站上当彩蛋，但别指望直接拿它做产品。

原因在于，它的整个体验都建立在“一条固定路径 + 一种交互方式”上。这种极简设计带来了强烈的沉浸感，但同时也牺牲了通用性。如果你想把它改成通用展示或业务场景，需要重写相机路径和交互逻辑，而单文件结构会让这些改动变得很难维护。

另一个限制是素材的不可复用性。AI 生成的场景图板是为这个特定视角和色调服务的，换个主题就得重新生成、重新分层、重新调色，工作量并不小。它更像一个思路样板，而不是一个开箱即用的组件。

不过，这套思路的参考价值很明确：用 AI 生成高细节静态视觉层，再叠加到 Three.js 的实时渲染上，以极低成本获得电影感的运动场景。对设计师和前端开发者来说，这是 AI 与渲染引擎协作的直观案例；对 Three.js 使用者来说，单文件零构建的架构也值得拆开看看；对做沉浸式交互的人来说，它展示了如何用一个滚轮把用户约束在一条叙事线里。

项目地址：https://github.com/MengTo/kage