project
Kage - 开源的沉浸式 3D 交互体验项目，实时构建动态场景
Kage 是设计师 Meng To 开源的沉浸式 3D 交互体验项目。工具仅用单个 HTML 文件，以 Three.js 实时渲染叠加 GPT Image 2 生成的场景素材，构建一场虚构京都山...
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、胶片颗粒与暗角后处理。
-
无障碍适配：内置减弱动画选项，并支持移动端响应式布局。
微信关注回复“开源”，加入AI开源项目交流群
如何使用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） |
|---|---|---|
| 项目定位 | 设计师主导的前端展示实验，聚焦单页沉浸式叙事体验 | 李飞飞创立的 AI 独角兽公司，构建大型世界模型（LWM）基础设施 |
| 3D 生成方式 | 无 AI 3D 生成能力，场景由 GPT Image 2 产出 2D 素材后手工叠加到 Three.js 中 | 从单张图片或文本提示词一键生成完整、持久、几何一致的 3D 世界 |
| 交互自由度 | 线性叙事——仅支持沿预设路径滚动，无法自由探索 | 开放世界——支持自由移动相机、景深调节、变焦及实时交互探索 |
| 技术架构 | 单 HTML 文件零构建，直接嵌入 Three.js r149，无后端无依赖 | 基于 3D 原生表示（NeRF/Gaussian Splatting）的大型神经网络模型，需云端推理 |
| 部署门槛 | 极低，任意静态服务器或本地打开即可运行 | 极高，需申请内测资格，依赖云端算力与专业工作流集成 |
| 输出形态 | 浏览器内不可导出的封闭式体验页面 | 可导出为 Mesh、Gaussian Splatting 等标准 3D 格式，兼容 Unreal/Unity |
| 应用场景 | 个人作品集、品牌预热页、前端教学案例 | 游戏开发、影视预演、VR/AR 内容、数字孪生、机器人仿真训练 |
| 核心差异 | 用”预生成素材 + 极简代码”模拟 3D 沉浸感 | 用”空间智能模型”从 2D 直接推理并生成真实 3D 世界 |
Kage的应用场景
-
个人作品集/创意主页：设计师或开发者可用单文件 3D 沉浸式体验替代传统作品集，以滚动叙事展示项目，视觉记忆点远超常规网页。
-
文旅景区数字导览：将 Kage 的”夜游山寺”模式迁移到真实景点，通过滚动穿越古建筑群、自然景观，替代静态图文介绍。
-
品牌发布/产品预热页：新品上市前以单页电影级体验营造氛围——如汽车、腕表、奢侈品可用章节式滚动揭示产品细节与品牌故事。
-
博物馆/历史教育数字展览：重现历史场景（如古代城市、遗址），让学生或观众通过滚动”走进”历史，结合 AI 生成素材降低美术成本。
-
前端教学与 Three.js 入门案例：作为单文件零构建的典范，Kage 适合直接拆解源码教学，学生无需配置 npm 环境即可理解 3D 场景、相机路径与滚动驱动的核心逻辑。