Kage

Kage 是什么：单文件 Three.js 沉浸式 3D 网页体验

Kage 是由设计师 Meng To 开源的沉浸式 3D 交互体验项目。整个作品被封装进一个的 HTML 文件里，借助 Three.js 在浏览器中实时渲染 3D 山寺夜景，并把 GPT Image 2 生成的场景素材、字体层与后期效果有机叠加，最终组成一场「虚构京都山寺的夜间漫步」。与传统动辄上百兆资产、需要复杂构建链的网页 3D 体验不同，Kage 把所有视觉、交互和滚动编排都写进同一个 index.html，无需 npm、无需打包、也无运行时网络依赖，是真正”即开即用”的网页 3D 范本。

Kage 官方在线体验页：虚构京都山寺雨夜漫步的开篇镜头（截图来源：mengto.github.io/kage）

Kage 开源仓库主页：单 HTML 文件结构、PROMPT.md 与 vendored Three.js r149（截图来源：github.com/MengTo/kage）

对前端工程师与数字艺术从业者来说，Kage 更像是一份可运行的设计研究：它证明了在 AI 辅助创作背景下，设计师不必动用大型世界模型，也能在浏览器里做出具有电影质感的实时 3D 叙事。也正因如此，Kage 经常被拿来与同样基于浏览器的 3D 工具做参照，比如 动态3D地球 之类的实时三维网页作品，二者都强调”轻量、可直接打开”，但定位差异明显。

Kage 的主要功能

1. 滚动驱动的镜头叙事：全篇不设按钮与菜单，鼠标滚轮直接推动摄像机沿预设轨道穿行，章节切换自然流畅，沉浸感几乎不被打断。
2. 单 HTML 文件的极简架构：所有场景结构、CSS、滚动编排与交互逻辑都放在一个 index.html 里，附带 vendored 的 Three.js r149，没有任何包管理器或构建步骤。
3. Three.js 实时渲染 + GPT Image 2 静态素材叠加：运行时程序化生成寺庙、鸟居、灯笼、月亮、雾、雨丝与落叶等元素，再叠加以 GPT Image 2 生成的 WebP 场景板与前景抠图，兼顾 3D 真实感与美术构图。
4. 电影级画面后期调控：暗色调、暖琥珀光、雾、bloom 与胶片颗粒共同构成克制而深邃的东方美学；并附带 reduced-motion 适配与响应式移动布局。
5. 五篇章线性结构：山门入口、静庭、匠艺工坊、余晖、宣言五个章节串成一场夜游，雨丝、落叶与朱红满月在场景中交替出现。
6. 二次创作友好：仓库自带 PROMPT.md 描述了场景结构、布局系统、语言与质量约束，便于读者用 AI 重新生成原创素材后再创作自己的版本。

如何使用 Kage

1. 直接在线体验：访问 Meng To 部署在 GitHub Pages 上的官方体验地址，滚动鼠标即可完整观看五个章节。
2. 本地克隆与运行：克隆仓库后进入项目根目录，使用任意静态服务器即可，例如 python3 -m http.server 4173 --bind 127.0.0.1，随后在浏览器访问 http://127.0.0.1:4173/。
3. 研究场景结构：阅读仓库内的 README.md 与 PROMPT.md，理清场景构建、滚动编排、后期与图层叠加的思路，作为学习 Three.js 网页叙事的参考。
4. 二次创作或重新诠释：在不直接复用原代码与原素材的前提下，按 PROMPT.md 的指引用 AI 重新生成原创场景图，再在单 HTML 结构里替换为自己的 Three.js 编排。

Kage 的二次创作与素材替换思路

需要特别注意的是，原作者明确表示 Kage 的代码与美术素材目前并未授予再使用或再分发的许可，第三方 Three.js 运行时本身仍保留其 MIT 许可。因此，如果你希望基于 Kage 做衍生或”换皮”，更稳妥的做法是按仓库自带 PROMPT.md 的描述，自行用 AI 生成全新的场景板、前景抠图与字体版面，再在单 HTML 结构中替换为自己实现的 Three.js 场景。这样既能保留”滚动驱动、电影质感”的体验骨架，又不会触碰原作者未授权的美术资产。

Kage 与 World Labs (Marble) 的同类工具对比

Kage 的使用场景

1. 个人作品集与创意简历：把滚动叙事当作简历的引导线，把作品展示串联成一场电影感的浏览体验，比静态栅格更抓人。
2. 文旅与古建数字化：为景区、博物馆或古建保护项目提供一种”云端漫步”的轻量化方案，可参考 AI 3D World 等通用 3D 场景方案的思路。
3. 品牌营销与新品发布：用电影级滚动叙事承载高端产品发布页，让用户在缓慢推进中自然接收品牌氛围，预算与门槛远低于制作一条同品质的滚动视频。
4. 教育与科普展示：把抽象的历史场景或科学过程拆解为五个连续章节，作为沉浸式课件使用，与 腾讯混元3D 等文生 3D 引擎结合可进一步降低素材制作门槛。
5. 前端与 WebGL 教学：代码与素材组织方式本身就是极好的教学样本，可与 TRELLIS 3D、Rodin (Hyper3D) 等侧重几何生成的方案对照学习。

Kage 的常见问题解答

Kage 是一个真正的 3D 应用还是只是一个滚动视频？

Kage 是实时渲染的 WebGL 3D 场景。灯笼、月亮、雨丝、雾、落叶等元素在浏览器中由 Three.js 即时生成，镜头与滚轮严格同步，只有前景的 WebP 场景板与抠图层是 GPT Image 2 预先生成的静态美术素材。

运行 Kage 需要怎样的环境？是否必须联网？

本地克隆后用任意静态服务器（如 python3 -m http.server）即可运行，无 npm、无构建步骤，也无需环境变量或分析脚本；首次打开在线版本之外，运行时没有任何网络依赖。

Kage 的代码与美术素材可以商用或二次分发吗？

原作者在仓库 README 中明确：Kage 的原始代码与美术素材目前未授予再使用或再分发的许可；随项目附带的 Three.js r149 运行时仍保留其自身的 MIT 许可。计划做衍生项目时，建议参考 PROMPT.md 自行重新生成原创素材。

Kage 官网与开源仓库

Kage 官方在线体验地址：https://mengto.github.io/kage/
Kage 开源仓库地址：https://github.com/MengTo/kage

OpenI AI时代点评

Kage 给人的最大启发，是一种”以小博大”的网页 3D 思路：单 HTML 文件、不到 1 MB 的 Three.js 与代码、外加几张 GPT Image 2 生成的高质量图层，就能做出让人愿意停留数分钟的沉浸式体验。在 World Labs Marble 等空间智能模型日益受到关注的当下，Kage 反向证明了”设计师主导 + 线性叙事”依然有其独特价值——它牺牲度，换来的是极低门槛、可直接部署与对素材完全可控。如果你想感受实时 3D 网页叙事的魅力，可以先去 Kage 官网 漫步一番，再回到 AI 3D Model Generator 这类自动生成工具的页面，对比”程序编排”与”几何一致性生成”两种范式的差异。