Kage

一个交互式五章节夜间漫步项目，通过Three.js实时渲染京都山寺，并叠加电影感生成图像。

查看在线项目 · 查看源码 · 阅读构建提示

功能特点

• 随页面滚动，驱动实时WebGL摄像机穿行于山寺之间。
• 融合程序化建筑、灯笼光、雾、雨、飘落的树叶、朱红色月亮，以及克制的泛光后期管线。
• 在3D世界之上叠加编辑排版、生成场景图板，以及保留透明通道的WebP前景元素，并配有分章节的淡入淡出与模糊过渡。
• 包含章节导航、响应式移动布局、减少动态效果行为，以及为精确指针设备设计的自定义光标。

制作方式

Kage是一个刻意保持精简的静态站点。index.html中包含了文档结构、CSS、程序化场景构建、滚动编排和交互逻辑。通过内置的Three.js r149构建版本提供WebGL渲染，无需包管理器或构建步骤。

寺庙、鸟居、灯笼、月亮、地形、雨、树叶、雾和后处理均在运行时构建。经过优化的WebP场景图板和前景剪影置于常规HTML层中，为页面带来拼贴般的纵深感，同时保持摄像机路径和光照为实时渲染。

构建或二次创作

PROMPT.md中提供的可移植实现简报描述了重建或重新诠释该体验所需的场景结构、布局系统、动效语言和质量约束。

本地运行

在仓库根目录下运行：

python3 -m http.server 4173 --bind 127.0.0.1

然后访问 http://127.0.0.1:4173/。

没有构建步骤、环境变量、分析脚本或运行时网络依赖。Python仅用于在本地提供静态文件服务；任何等效的静态服务器均可。

项目结构

kage/
├── index.html
├── PROMPT.md
├── README.md
├── assets/
│   └── kage-preview.webp
└── secret-pathways-assets/
    ├── fonts.css
    ├── three.min.js
    ├── generated/
    └── foreground/png/

设计与致谢

Kage是一项受日本寺庙建筑和夜间庭院启发的原创独立设计研究。它不隶属于任何特定寺庙、文化机构或旅游组织。

电影感场景图板和前景艺术品是使用GPT Image 2为本项目生成的，随后经过艺术指导并与实时Three.js场景合成。内置的Three.js r149构建版本保留其MIT许可证声明和版权归属。

更多项目

其他同类单文件实验——无构建步骤、无框架，所有内容都放在一个HTML文档中。

• Complete Shelf —— 一个原创的Three.js图书馆，包含七本交互式布面精装书。 · 源码
• Sketchbook —— 一本翻页式新加坡写生簿：拖拽翻页，拖动放大镜进行查看。 · 源码
• Agent Skills —— 这些页面所基于的可复用技能库，包括从Kage中提取的落叶和指针拖尾技术。

许可证

目前未授权对原始Kage代码或艺术作品的复用或再分发。第三方Three.js运行时仍受其附带的MIT许可证声明保护。