Kage
滚动鼠标就能夜游京都山寺的3D网页，实时构建动态场景
单文件HTML零依赖，用Three.js实时渲染雨雾落叶，五章节电影感叙事。
核心功能
滚动即导航
鼠标滚轮是唯一交互方式，页面滚动直接映射相机位置和角度，零按钮零菜单，上手没有学习成本。
程序化3D场景
寺庙、鸟居、石阶、灯笼、月亮和地形全部用代码在运行时生成，不是加载外部3D模型，场景轻量且可控。
AI素材融合渲染
GPT Image 2生成的场景图板和透明WebP前景元素叠加到Three.js实时3D世界上，静态素材和动态光影组合出collage般的深度。
电影级后处理
Bloom泛光、胶片颗粒、暗角和深度雾效都在浏览器里实时计算，营造出近黑、藏蓝、暖琥珀和朱红的克制夜游氛围。
五章叙事结构
按山门、静庭、匠艺、余晖、宣言五个章节编排，每段滚动对应新的构图和镜头语言，像一本会动的画册。
响应式与无障碍
内置移动端适配和减少动画选项，系统偏好开启减少动态效果时页面会自动降低动画强度，避免眩晕。
PROMPT.md实现文档
作者放出的不只是源码，还有一份描述场景结构、布局系统和动效规范的提示词文档，方便用AI重建或二次创作。
产品特色
- 01
一个HTML文件装下整个3D世界
没有React，没有Next.js，没有npm依赖，没有构建步骤。整个沉浸式体验就在一份index.html里，下载后用python起个静态服务器就能跑，部署和分享都省事。
- 02
滚动驱动的连续镜头是它的灵魂
传统网页滚动控制的是DOM位置，Kage直接把它映射到相机的位置和旋转上。滚轮一转，镜头往前推进，雾气和灯光跟着变化，整个过程像一条连续的镜头而不是幻灯片切换。
- 03
PROMPT.md比源码更有参考价值
作者同步放出了一份可移植的实现文档，把场景结构、交互规则、视觉约束和动效规范都写清楚了。对于想研究AI时代前端工作流的人来说，这份文档和源码一样值得看。
- 04
设计师主导的AI创作范式
Meng To不是程序员出身，他用自己的设计判断主导了整个项目。AI负责产出视觉素材，Three.js负责实时渲染，HTML和CSS处理排版，三者分工明确，AI是工具不是替代者。
应用场景
✅ 个人作品集创意主页
用滚动叙事的3D体验替代传统网页作品集，视觉记忆点比常规页面强不少。
✅ 文旅景区数字导览
把夜游山寺的模式迁移到真实景点，通过滚动穿越古建筑群和自然景观，替代静态图文介绍。
✅ 品牌发布氛围页
新品预热时用单页电影级体验营造氛围，章节式滚动逐步揭示产品细节或品牌故事。
✅ 前端教学与Three.js入门
单文件零构建的代码结构适合直接拆解教学，学生不需要配npm环境就能理解3D场景和滚动驱动逻辑。
✅ AI与传统前端融合实验
作为GPT Image 2素材与WebGL实时渲染结合的范例，适合研究AI素材如何嵌入传统前端工作流。
常见问题
解答您关于"Kage"的常见疑问，让您更好地使用这款AI工具
-
完全免费且开源，代码在GitHub上公开，MIT协议。在线体验直接打开网页就能看。
-
本地运行只需要Python起一个静态服务器，不需要Node.js、npm或任何构建工具。
-
支持，项目内置响应式布局，移动端也能正常浏览。不过3D效果在性能较弱的手机上可能不够流畅。
-
视频是预渲染的，Kage是实时计算的。寺庙、雨雾、灯笼光都是Three.js在运行时生成的，不是播放视频文件。
-
场景图板和前景美术素材由GPT Image 2生成，但3D世界、相机路径、粒子效果和交互逻辑都是代码实现的。AI负责视觉素材，Three.js负责空间和动态。
-
可以，作者提供了PROMPT.md描述完整的实现规范。但需要注意原始artwork不能直接复用，仿做时要用AI重新生成素材。
-
不太友好，内容主要在Canvas里渲染，搜索引擎抓取有限。它更适合做体验型页面而不是内容型网站。
-
浏览器访问mengto.github.io/kage/就能体验。本地运行从GitHub克隆仓库后，用Python起静态服务器就行。
立即体验“Kage”
Kage是设计师Meng To开源的沉浸式3D交互项目，整个体验打包在一个HTML文件里。滚动鼠标就能操控相机穿过京都山寺的五个章节，雨雾、落叶、灯笼和朱红满月都是Three.js实时渲染的。代码里没有构建步骤和框架依赖，本地起个静态服务器就能跑，适合用来研究前端3D叙事。
