AI工作站

Kage是设计师Meng To开源的沉浸式3D交互体验项目。项目为单HTML文件实现，基于Three.js做实时渲染，叠加GPT Image 2产出的场景素材，打造虚构京都山寺的夜间漫步体验。用户只需要滚动鼠标就可以操控相机行进，依次穿行山门、静庭等五个叙事章节，感受雨雾、落叶与朱红满月交织的电影级画面氛围。项目开箱即可运行，是AI生成素材与WebGL实时渲染相结合的前端设计参考范例。

一、产品核心功能：

1、滚动驱动导航：仅依靠鼠标滚轮控制相机沿预设路径漫游山寺，无按钮、无菜单，滚动为唯一交互手段。

2、Three.js实时3D渲染：浏览器端实时渲染寺庙建筑、山门、雨雾、落叶、朱红满月等全套动态场景。

3、AI素材叠加融合：把GPT Image 2生成的场景图板与透明WebP前景素材，叠加进实时3D场景，强化电影氛围感。

4、五章节叙事流程：按照山门→静庭→匠艺→余晖→宣言划分五个章节，滚动触发镜头切换，完成完整叙事体验。

5、单文件零构建交付：业务逻辑、样式、渲染逻辑全部收纳在单个HTML文件，不需要npm、React以及编译构建工具。

6、电影级视觉后处理：采用近黑、藏蓝、暖琥珀、骨白、朱红的克制配色，搭载泛光、胶片颗粒、暗角等画面特效。

7、无障碍与多端适配：自带减弱动画能力，同时支持移动端响应式布局。

二、典型使用场景：

1、浏览器端直接体验沉浸式3D叙事网页，感受AI素材结合WebGL的交互效果。

2、前端开发者学习单文件WebGL项目架构，参考AI素材与实时3D结合的实现思路。

3、设计师参考AI提示词驱动的可视化交互作品，借鉴设计优先的前端创作范式。

4、静态服务器快速部署演示，用于技术分享、作品展示、案例教学。

5、参考项目叙事镜头编排、配色体系、后处理效果，开展同类交互式作品二次创作。

三、标准使用流程：

1、在线体验：浏览器直接访问https://mengto.github.io/kage/，进入京都山寺夜游交互场景。

2、本地部署：克隆项目仓库，启动任意静态服务器，例如`python3 -m http.server`，无需额外构建编译。

3、体验交互：打开页面后滚动鼠标滚轮，相机会沿预设路径依次走完五个叙事章节。

4、环境要求：使用支持WebGL的现代浏览器，否则会出现渲染异常。

5、无障碍体验：系统开启“减少动态效果”偏好，页面会自动降低动画强度，规避眩晕问题。

6、二次创作：如需复刻改造，参考PROMPT.md使用AI重新生成素材，不可以直接复用项目原有美术资源。

数据统计