开源项目游戏开发类新手
Kage(京都山寺夜行互动项目)
一个使用 Three.js 实时渲染的互动式五章夜景漫步体验,穿过京都山间寺庙,融合过程化建筑、灯笼光线、雾、雨、落叶和生成式图像。
0 次阅读2026/08/10 发布
社区作者 · Aitroys 管理员
它解决什么问题
Kage 是一个互动式五章夜间漫步项目,带领浏览者穿过京都市郊的一座山间寺庙。页面滚动时,WebGL 相机会实时移动,场景由过程化建筑、灯笼光线、雾、雨、飘落的树叶、朱红色月亮和克制的泛光后处理构成。编辑排版、生成式场景图版以及保留透明通道的 WebP 前景元素被叠加在 3D 世界上,并带有章节淡入淡出与模糊过渡。项目还包含章节导航、响应式移动布局、减少动态效果行为,以及为精确指针设备设计的自定义光标。所有 HTML、CSS、过程化场景构建、滚动编排和交互逻辑都集中在 index.html,Three.
js r149 的 vendored 版本由本地文件直接加载,无需包管理器或构建步骤。寺庙、鸟居、灯笼、月亮、地形、雨、树叶、雾和后处理均在运行时构建。场景板和前景剪影使用 GPT Image 2 生成,再与实时 Three.js 场景进行艺术指导与合成。许可证方面,原始代码和美术未授予任何复用或再分发许可;内置 Three.js r149 保留其 MIT 许可证公告。适用对象包括 Web 创意开发者、Three.js 学习者和视觉叙事设计师。
— 本文由 AI 根据公开来源辅助整理,命令、版本与许可证请在使用前到原始页面复核。
安装 / 开始使用
运行环境:任意现代浏览器,本地需安装 Python 3(仅用于静态文件服务)。1) 在仓库根目录打开终端,执行:
python3 -m http.server 4173 --bind 127.0.0.1;2) 浏览器访问 http://127.0.0.1:4173/;3) 无需构建步骤、环境变量、分析脚本或运行时网络依赖;也可使用任意等效静态服务器替代 Python。
来源教程配图
适用场景
学习 Three.js 无构建步骤的静态站点组织和 WebGL 场景搭建
研究滚动驱动的 3D 相机路径与滚动编排
参考生成式图像(GPT Image 2)与实时 3D 场景合成的工作流
作为京都寺庙夜景氛围和禅意视觉的设计灵感