Kage：一个用单 HTML 文件实现的 AI+3D 沉浸式山寺夜游项目

2 阅读

什么是 Kage

Kage 是设计师 Meng To 开源的一个实验性网页项目，目标很明确：用最轻量的方式，在浏览器里营造一场可交互的京都山寺夜间漫步。整个体验只依赖一个 HTML 文件，打开就能运行，不需要安装任何依赖，也不用跑构建命令。

它背后的技术组合其实挺巧妙：用 Three.js 做实时 3D 渲染，搭建出山门、庭院、回廊等基础结构；再把 GPT Image 2 生成的 2D 场景图（比如雨雾、落叶、朱红满月）作为透明 WebP 图层叠加到 3D 空间中。最终效果既有动态光影和空间感，又保留了 AI 生成图像特有的氛围质感。

用户唯一要做的，就是滚动鼠标。随着滚轮移动，相机沿着预设路径缓缓前行，依次穿过“山门→静庭→匠艺→余晖→宣言”五个章节。没有菜单，没有按钮，也没有点击提示——滚动本身就是叙事节奏的控制器。

核心功能拆解

滚动即导航

Kage 的交互逻辑极度克制。你无法自由移动视角，也不能暂停或跳转章节。一切由滚动驱动：向上滚，前进；向下滚，后退。这种线性设计看似限制自由，实则强化了电影镜头般的引导感。每个章节对应一段精心编排的构图，比如在“静庭”段落，镜头会低角度掠过积水石板，倒影中映出飘落的枫叶。

实时渲染 + AI 图层融合

Three.js 负责构建几何体、灯光和相机运动，但很多细节并非纯 3D 建模。例如远处的山峦、天空中的满月、甚至部分建筑纹理，其实是 GPT Image 2 生成的 2D 图像。这些图被处理成带透明通道的 WebP 格式，作为“前景贴片”投射到 3D 空间的特定位置。这种方式既降低了建模成本，又保留了 AI 图像的独特笔触和氛围。

单文件零依赖架构

整个项目只有一个 index.html，所有 JavaScript、CSS、Three.js 库（r149 版本）、材质数据甚至 base64 编码的音频片段都内联其中。这意味着：

  • 可直接双击在本地浏览器打开（需支持 WebGL）
  • 部署只需扔到任意静态服务器（如 GitHub Pages、Vercel 或 python3 -m http.server）
  • 没有网络请求、没有分析脚本、没有第三方追踪

对前端初学者来说，这几乎是理解“滚动驱动 3D 场景”最干净的代码样本。

电影级视觉处理

Kage 的画面之所以有“胶片感”，靠的是几项后处理效果：

  • Bloom（泛光）：让朱红灯笼、满月边缘产生柔和光晕
  • 胶片颗粒：叠加细微噪点，避免数字图像过于“干净”
  • 暗角（Vignette）：聚焦画面中心，增强沉浸包围感
  • 克制配色：主色调为近黑、藏蓝、暖琥珀、骨白与朱红，避免色彩干扰叙事

Loomy

这些效果全部通过 Three.js 的 EffectComposer 实现，代码量不大但效果显著。

无障碍与移动端适配

项目内置了对系统级“减少动态效果”偏好的响应。如果用户在操作系统中开启了该选项，Kage 会自动降低粒子动画强度（如落叶速度）并简化部分过渡，防止眩晕。同时，页面在手机上也能正常显示，虽然交互变为触摸滑动而非滚轮，但章节切换逻辑保持一致。

如何体验与二次创作

在线体验

最简单的方式是直接访问 https://mengto.github.io/kage/。建议使用 Chrome、Firefox 或 Edge 等现代浏览器，并确保 WebGL 已启用。

本地运行

若想查看源码或修改，可克隆 GitHub 仓库：

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

然后在浏览器打开 http://localhost:8000 即可。注意：不要直接双击 HTML 文件在某些浏览器中打开，可能因 CORS 限制导致资源加载失败。

二次创作注意事项

Meng To 在项目中明确说明：不可直接复用原 artwork。如果你打算仿制类似项目，需参考 PROMPT.md 文件中的提示词，用自己的账号调用 GPT Image 2（或其他图像生成模型）重新生成素材。这是为了避免版权争议，也鼓励创作者建立自己的视觉语言。

与 World Labs 等“真 3D 生成”项目的本质区别

网上有些文章将 Kage 与 World Labs 的 Marble 等项目对比，其实两者定位完全不同：

  • Kage 是“模拟沉浸”：它没有从文本或图片生成 3D 模型的能力。所有空间结构都是手工编码的，AI 只提供 2D 视觉元素。优势在于轻量、可控、即开即用。
  • World Labs 是“空间智能”：其核心是大型世界模型（LWM），能从单张图推理出几何一致、可自由探索的 3D 场景，输出标准格式供 Unity/Unreal 使用。但依赖云端算力，部署门槛高。

简单说，Kage 像一部精心剪辑的互动短片，而 World Labs 试图构建可无限扩展的虚拟世界引擎。前者适合个人表达，后者面向工业级应用。

实际应用场景

尽管 Kage 本身是个艺术实验，但它的模式可迁移到多个领域：

个人作品集或创意主页

传统作品集多为网格缩略图+详情页，记忆点弱。而用 Kage 式的滚动叙事，设计师可以将项目包装成一段旅程——比如 UI 设计师可让访客“走进”一个虚拟产品发布会现场，每滚一段展示一个界面细节。

文旅数字导览

想象把“山寺夜游”换成真实景点：黄山云海、敦煌石窟、苏州园林。游客在官网即可通过滚动“穿行”其中，比静态图文或视频更具参与感。AI 生成素材还能快速还原历史场景（如唐代长安街市），成本远低于 3D 建模。

品牌预热页面

奢侈品、汽车或腕表品牌常需要营造神秘感。Kage 的章节式结构非常适合分阶段揭示产品：第一章朦胧光影，第二章局部特写，第三章全貌亮相……配合音效和后处理，比普通落地页更有仪式感。

教育与博物馆展览

历史老师可用类似项目重现古罗马广场或宋代汴京。学生滚动“行走”其间，结合文字标注理解空间布局。由于素材由 AI 生成，教师无需美术功底，只需调整提示词即可定制内容。

Three.js 教学案例

对前端学习者，Kage 是绝佳的入门样本。它展示了如何：

  • 用 ScrollTrigger（来自 GSAP）同步滚动与相机位置
  • 构建基于路径的相机动画
  • 叠加 2D 图层到 3D 空间
  • 实现基础后处理管线

而且因为是单文件，学生可以直接阅读、调试、修改，不用折腾 webpack 或 Vite 配置。

局限与思考

当然，Kage 并非万能模板。它的线性叙事不适合需要自由探索的场景；AI 生成的 2D 图层在视角大幅变化时可能出现穿帮；性能上，低端设备可能卡顿，尤其开启 bloom 和粒子效果后。

但它真正有价值的地方，在于证明了一件事：在 AI 时代，设计师不必等工程师搭好框架再创作。借助提示词生成素材，再用轻量代码组装，一个人就能完成过去需要团队协作的沉浸式体验。这种“设计先行、代码为辅”的工作流，或许会成为下一代创意开发的常态。

如果你感兴趣，不妨去 GitHub 看看那个不到 2000 行的 HTML 文件——里面没有魔法，只有对细节的耐心打磨和对体验的清晰判断。