Kage 运营中

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

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

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

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

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

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