一场沉浸式京都夜行：用浏览器漫步山寺的交互式数字艺术

你是否想过，在网页里踏着青苔石阶、穿过朱红鸟居、仰望朦胧月色，完成一次静谧而诗意的京都山寺夜游？Kage 正是这样一件无需下载、打开即用的创意网页作品——它不是视频，也不是游戏，而是一个由代码实时渲染的五章互动叙事空间。它用前沿的 WebGL 技术，把传统日式美学、自然氛围与网页滚动交互巧妙融合，让每一次下拉都像翻开一页手绘卷轴，让每一次驻足都仿佛听见风铃轻响。

核心功能

• 实时滚动驱动的3D漫游：无需点击或拖拽，仅靠自然滚动即可推动虚拟摄像机穿行于山寺之间，从山门到主殿，每一段旅程都随页面高度精准编排。
• procedurally生成的日式场景：整座寺庙（包括塔楼、灯笼、鸟居、石阶、松林、雾气、细雨、飘落的枫叶）全部在浏览器中即时生成，不依赖预渲染模型，轻量却富有细节。
• 电影级视觉分层系统：将Three.js 3D世界、动态生成的场景底图（WebP格式）、透明前景剪切元素（如飘动的纸灯、浮动的汉字）分层叠加，营造出手工拼贴般的纵深感与呼吸感。
• 全场景氛围引擎：内置动态月光（朱红色满月）、物理模拟雨滴轨迹、粒子级雾气扩散、景深模糊与柔光泛光（bloom）后处理，共同构建出极具东方意境的夜间氛围。
• 人性化交互设计：支持章节导航按钮快速跳转；适配手机触屏与桌面鼠标；自动响应“减少动画”系统偏好；自定义高精度光标提升操作质感。
• 零构建、纯静态部署：整个项目仅靠一个 index.html 文件实现——内联CSS、JavaScript与精简版Three.js（r149），无打包工具、无依赖安装，复制即跑。

适合哪些人用

如果你是前端开发者，Kage 是学习 Three.js 实战、WebGL 性能优化与创意编码表达的绝佳范例；如果你是交互设计师或数字艺术家，它展示了如何用代码承载文化叙事，将留白、节奏、物哀之美转化为可交互体验；如果你是日本文化爱好者或旅行者，它提供了一种超越照片与视频的沉浸式感知方式——不是观看京都，而是“步入”京都的夜晚；甚至普通用户也能纯粹享受这场10分钟的静心之旅，无需任何技术背景。

快速上手

无需安装！直接访问 在线演示地址 即可开启夜行。想本地体验？只需三步：
① 访问 GitHub 项目页 → 点击绿色 “Code” 按钮 → 下载 ZIP 包；
② 解压后双击打开 index.html（推荐使用 Chrome 或 Edge 浏览器）；
③ 滚动鼠标/手指，慢慢向下，让故事自然展开——建议关闭背景音乐，戴上耳机，感受雨声、风声与文字浮现的节奏。

项目信息

编程语言：HTML（含内联 CSS/JS）｜Star 数：586｜开源协议：未明确声明（建议查看仓库确认）｜GitHub 项目地址

这不仅是一次技术展示，更是一封写给数字时代的人文情书——用最轻的代码，承载最重的意境。