kage

在浏览器里夜游京都山寺，沉浸式体验五章叙事

kage 是一个基于 Three.js 构建的交互式夜间山寺漫步体验项目，以京都山间寺庙为背景，通过五个章节的叙事引导用户在三维场景中探索。项目使用 HTML 和 JavaScript 实现实时渲染，营造沉浸式的夜间氛围，用户可以通过交互操作在虚拟环境中移动、观察，体验光影变化和空间叙事。它解决了如何用 Web 技术低成本地创建具有文化氛围的沉浸式体验的问题，核心能力包括三维场景构建、实时渲染、交互叙事设计以及氛围营造。项目目前处于早期阶段，代码结构清晰，适合作为 Three.js 学习参考或文化数字化的原型。

开源 free 设计创意

访问官网 ↗ GitHub ↗ 文档 ↗

GitHub 星标 ★ 1669

维护状态维护中

是否开源是

定价模式 free

项目数据

分类设计创意

开发团队MengTo

所属国家

官网地址https://mengto.github.io/kage

GitHubhttps://github.com/MengTo/kage

定价模式free

价格说明开源项目，可自行部署，完全免费。

访问状态

是否开源是

开源协议

主要语言HTML

技术栈/模型creative-coding,generative-art,interactive-storytelling,japanese-design,threejs,webgl

GitHub 星标★ 1669

30天Star增速

HF 下载量

上线时间2026-08-08 00:00:00

最近更新2026-09-24 00:00:00

维护状态维护中

中文支持

访问方式

移动端支持

综合评分

收录时间2026-08-09

浏览次数5

使用教程

难度：入门约 5 分钟部署方式：本地安装 3 步

环境要求

Python 3（仅用于启动本地静态文件服务）
现代支持 WebGL 的浏览器（项目使用 Three.js r149 / WebGL 渲染）
无需 Node.js、包管理器或构建步骤

安装与启动步骤

1获取项目代码

把仓库克隆到本地，后续所有命令都在仓库根目录执行。
```
git clone https://github.com/MengTo/kage.git
cd kage
```
2启动本地静态服务

项目是纯静态站点，没有构建步骤，用任意等价静态服务器即可。
```
python3 -m http.server 4173 --bind 127.0.0.1
```
3在浏览器中访问

打开本地地址即可进入夜间山寺场景，上下滚动页面会推进五个章节。

如何确认成功

浏览器访问 http://127.0.0.1:4173/ ，能看到 WebGL 渲染的夜间山寺场景并随页面滚动推进章节，即启动成功。

常见问题

Q：需要 npm install 或构建吗？

A：不需要。README 明确说明项目没有构建步骤、没有环境变量，Three.js r149 已内置（vendored），不依赖包管理器。

Q：为什么用 Python 启动？

A：Python 只用来在本地提供静态文件服务，任何等价的静态服务器都可以替代，不参与页面渲染逻辑。

Q：端口 4173 被占用怎么办？

A：可以换一个未被占用的端口启动，例如把命令中的 4173 改成 8000，然后访问对应的本地地址。

Q：运行需要联网吗？

A：不需要。README 说明项目没有运行时网络依赖、没有分析脚本，静态资源已随仓库提供。

注意事项

必须在仓库根目录启动静态服务，否则页面引用的资源会 404。
index.html 内含文档结构、CSS、程序化场景构建、滚动编排与交互逻辑，可作为 Three.js 学习参考。
项目自带响应式移动端布局、减少动效（reduced-motion）行为与自定义光标，无需额外配置。

核心亮点

实时渲染的夜间光影效果，氛围感强
五章叙事结构清晰，交互引导自然
基于 Three.js，技术栈轻量，易于二次开发

不足之处

内容量有限，体验时长较短
文档和社区支持待观察

适用场景

数字文化展览中的虚拟漫游
Three.js 学习与教学案例
沉浸式 Web 艺术项目原型

替代项目

A-Frame、Babylon.js、model-viewer

项目介绍

kage 是设计创意领域的开源项目，由 MengTo 开发，是 2026 年新上线的项目。

在全站 13,109 个收录项目中，它的 GitHub 星标数（1,669）位列前 30%，在设计创意分类的 163 个项目里位列前 14%。

项目仍在小幅维护中，最近一次代码更新于 2026-09-24。可自行部署，完全免费。

它主要面向的使用场景是：数字文化展览中的虚拟漫游。同类可对比的替代方案包括 A-Frame、Babylon.js、model-viewer。

上一篇：repath-studio

下一篇：sketch-a-day