滚动鼠标夜游京都山寺：Kage用单个HTML融合AI素材与Three.js实时渲染
前几天刷 X，看到一条转发过千的帖子：有人用一段提示词让 AI 生成了京都山寺的 3D 世界。底下评论清一色说这不比那些套壳 AI 项目有意思多了。然后一个叫 Kage 的项目在 GitHub 上火了，现在已经有 1400 多个 Star。
它用一个 HTML 文件将 AI 生成的内容与 Three.js 实时渲染融合在一起。一打开网页就看到一片深蓝色的夜晚，山门、石阶、灯笼以及远处亮着灯光的寺庙都一一出现。装好后你只需要做一件事：滚动鼠标，在一座京都山寺里夜游。
作者 Meng To 并不是程序员出身，而是设计师，之前出版过《Design+Code》这本书。他所做的工作其实很简单：用一段提示词让 AI 生成一个京都山寺夜晚的 3D 世界，只需要滚动鼠标就可以夜游一圈。整个页面上没有按钮也没有菜单，因此滚动条就成了唯一的交互方式。
实际效果
第一次打开的时候其实是带着怀疑的——一个 HTML 文件能做出多大事？先滚一下滚轮试试。镜头沿着山间小道向远处延伸，穿过山门之后，两边的石灯一盏接一盏地亮起来，脚下的雾气也渐渐地消散了。下雨了，树叶也随风飘起来。再往里看，寺庙的屋檐进入画面，一座朱红色的月亮挂在山脊上，整座山变得非常宁静。
雨越下越大，但是远方山下的灯却一盏接一盏地亮起来。整个页面只有一种交互方式就是滚动，但却让人有一种走遍整个寺庙的感觉，不是在看网页，而是一部可以进入其中的交互式电影。
滚动就是控制器
相机是按照一条预先设定好的路线来移动的，滚多少镜头就前进多少，速度全由你掌控。没有按钮、没有菜单，滚轮就是唯一的交互方式，上手基本没有理解成本。从山门到寺庙，视角都是事先安排好的，你走到哪里镜头就对准哪里。
世界就是用实时渲染来表现的
寺庙、山门、雨、雾、落叶等，都是通过 Three.js 在浏览器中进行实时渲染的。当页面在滚动的时候，雨的方向以及落叶的轨迹会实时地进行计算，并不会像循环播放的视频那样。不是预先渲染好的图片，光影以及镜头运动轨迹都是在运行中不断变化的。
AI 素材叠出电影感
场景图板以及前景素材都是通过 GPT Image 2 来生成，再把它作为透明图层加入到 3D 的世界中去。实拍细节和实时光影放在一起，反而会更好一些。把整张图分成五个部分：山门、静庭、匠艺、余晖和宣言。颜色也十分低调，近黑、藏蓝、暖琥珀、骨白，再加上一点朱红，这样的氛围就一层层地叠出来了。
一个 HTML，零构建
不需要 React，也不需要 npm，构建工具、环境变量等等全部都不用考虑，直接在浏览器里打开就可以运行。Three.js 直接打包在仓库里，版本是 r149，拿来就能用。一套静态文件加上素材目录，部署起来也没什么负担。这么完整的页面效果，全靠一个 HTML 文件撑起来。
安装方式
它不需要任何后端支持，从本质上看就是个静态网站。想在本地跑起来，也就是一条命令的事：
python3 -m http.server 4173 --bind 127.0.0.1
然后在浏览器中输入 http://127.0.0.1:4173/ 就可以进入山里去了。作者还挂了一个在线版，浏览器里点开就能逛一圈。它连分析脚本都没埋，整个页面很干净，想研究素材是怎么拼的直接翻源码就可以了。
注意事项
想仿做的话，得拿着它的 PROMPT.md 自己重新生成一遍，素材是不能直接拿来用的。另外它的硬性条件就是必须使用 WebGL，如果浏览器不支持的话画面就会一片空白。不过它做了减弱动画的选项，给容易 3D 眩晕的人留了条后路。
Kage 挺有意思的，但也别指望它能直接拿来做产品，它本质上还是一个演示项目，用在个人网站上效果很好。它比较适合这些人：做设计或者前端的，想看看 AI 和实时渲染怎么配合；玩 Three.js 的，想研究一下单文件零构建的架构；还有对沉浸式交互感兴趣想找个参考的。
开源地址：https://github.com/MengTo/kage