AI导哈

AI文章

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

AI导哈整理

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

Kage的主要功能

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

微信关注回复“开源”，加入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 场景、相机路径与滚动驱动的核心逻辑。