Kage 开源的沉浸式 3D 交互体验项目，实时构建动态场景

Kage是什么

Kage 是设计师 Meng To 开源的沉浸式 3D 交互体验项目。工具仅用单个 HTML 文件，以 Three.js 实时渲染叠加 GPT Image 2 生成的场景素材，构建一场虚构京都山寺的夜间漫步。用户仅通过滚动鼠标可控制相机路径，穿越山门、静庭等五个章节，感受雨雾、落叶与朱红满月交织的电影级氛围。Kage 直接打开即可运行，是 AI 生成内容与实时 WebGL 融合的前端设计范例。

Kage的主要功能

滚动即导航 ：通过鼠标滚轮控制相机沿预设路径穿行山寺，零按钮、零菜单，滚动是唯一交互方式。

实时3D渲染 ：基于Three.js在浏览器中实时构建寺庙、山门、雨雾、落叶与朱红满月等动态场景。 AI素材融合 ：将GPT Image 2生成的场景图板与透明WebP前景元素，叠加到实时3D世界中增强电影感。 五章叙事结构 ：按山门→静庭→匠艺→余晖→宣言五章节编排，每段滚动对应新的构图镜头。 单文件零构建 ：全部逻辑、样式与渲染集中于一个HTML文件，无需npm、React或任何构建工具。 沉浸式视觉氛围 ：采用近黑、藏蓝、暖琥珀、骨白与朱红的克制配色，配合 bloom、胶片颗粒与暗角后处理。 无障碍适配 ：内置减弱动画选项，并支持移动端响应式布局。

如何使用Kage

• 在线体验 ：直接浏览器访问 https://mengto.github.io/kage/ 可进入京都山寺夜游。
• 本地部署 ：克隆仓库后运行任意静态服务器（如 python3 -m http.server ），无需构建步骤。
• 交互操作 ：打开页面后仅需滚动鼠标，相机便会沿预设路径自动穿行五个章节。
• 浏览器要求 ：确保使用支持 WebGL 的现代浏览器，否则画面无法渲染。
• 二次创作 ：仿做需根据 PROMPT.md 自行用 AI 重新生成素材，不可直接复用原项目 artwork。
• 无障碍设置 ：系统偏好开启减少动态效果时，页面会自动降低动画强度以防眩晕。

Kage的核心优势

• 单文件架构 ：全部逻辑、样式与 3D 渲染浓缩于一个 HTML 文件，零构建、零依赖、即开即用。
• 极简交互 ：仅通过滚动控制相机路径，无按钮无菜单，上手零成本。
• AI 融合渲染 ：GPT Image 2 生成的场景素材与 Three.js 实时 3D 渲染无缝叠加，兼具实拍质感与动态光影。
• 电影级沉浸 ：五章节叙事编排配合克制配色与后处理特效，营造出可交互的京都山寺夜游电影感。
• 设计师驱动 ：非程序员出身作者以提示词主导创作，展示了 AI 时代设计优先的前端开发新范式。
• 轻量可移植 ：无后端、无分析脚本、无运行时网络请求，任何静态服务器均可秒级部署。

Kage的项目地址

• 项目官网 ：https://mengto.github.io/kage/
• GitHub仓库 ：https://github.com/MengTo/kage

Kage的同类竞品对比

对比维度 | Kage | World Labs（Marble）

Kage的应用场景

• 个人作品集/创意主页 ：设计师或开发者可用单文件 3D 沉浸式体验替代传统作品集，以滚动叙事展示项目，视觉记忆点远超常规网页。
• 文旅景区数字导览 ：将 Kage 的夜游山寺模式迁移到真实景点，通过滚动穿越古建筑群、自然景观，替代静态图文介绍。
• 品牌发布/产品预热页 ：新品上市前以单页电影级体验营造氛围——如汽车、腕表、奢侈品可用章节式滚动揭示产品细节与品牌故事。
• 博物馆/历史教育数字展览 ：重现历史场景（如古代城市、遗址），让学生或观众通过滚动走进历史，结合 AI 生成素材降低美术成本。
• 前端教学与 Three.js 入门案例 ：作为单文件零构建的典范，Kage 适合直接拆解源码教学，学生无需配置 npm 环境即可理解 3D 场景、相机路径与滚动驱动的核心逻辑。