Repolode
billpwchan

billpwchan/sakura-fantasy

一款在浏览器中用 three.js 实时渲染的 3D 日本河谷小船之旅,涵盖四季与全天时段。

Star
98
Fork
6
未关闭 Issue
1
最近提交
昨天

这是什么?

桜幻想是一个可交互的实时 3D 场景:你乘坐一艘茅草顶的河船,沿日本河谷顺流而下,途经樱花林荫道、朱红太鼓桥、五重塔村落、竹林峡、千本鸟居和湖泊。植被基于真实日本植物的摄影测量扫描制作,光照随一天的太阳位置变化,天气包括晴、雾、雨、暴风和雪五种。

配乐随行程实时生成,采用平调、阳调等日本音阶,由筝、尺八和笙演奏,并混入寺庙钟声、京都庭园声景等实地录音,按地点、季节和时段放置。项目基于 three.js 的原生 JavaScript 实现,约 1 万行代码,没有使用游戏引擎或框架。访客可以调节季节、时辰、天气和镜头,也可以通过 URL 参数直接打开指定场景。

核心功能

  • 01基于摄影测量扫描植物的程序化河谷,支持四季变化。
  • 02动态太阳、天空、雾气及晴、雾、雨、暴风、雪五种天气。
  • 03实时渲染水面倒影、船尾尾迹、泡沫与落花。
  • 04实时生成的配乐,包含日本乐器与按地点放置的实地录音。
  • 05支持键盘操作、多种镜头模式以及 PNG 摄影模式。
  • 06通过 URL 参数直接跳转到指定季节、时辰、天气或位置。

适用场景

  • 学习 three.js 中的实时 WebGL 渲染技术。
  • 研究浏览器中的程序化场景生成与细节层级(LOD)加载。
  • 参考如何使用 Web Audio API 实现生成式音乐。
  • 作为独立的交互式 3D 环境场景来欣赏。

快速上手

  1. 1

    克隆仓库

    git clone https://github.com/billpwchan/sakura-fantasy.git
  2. 2

    进入项目文件夹

    cd sakura-fantasy
  3. 3

    安装依赖

    npm install
  4. 4

    启动开发服务器并访问 http://127.0.0.1:5190

    npm run dev

使用前须知

  • 元数据中的许可证字段为 NOASSERTION;README 称代码为 MIT 许可,素材各有自己的许可证(见 CREDITS.md),复用前请自行核对。
  • 手机和平板只提供简化的 quick 档位,README 中的性能数据来自高端 Apple M4 Max。

标签

常见问题

sakura-fantasy 是什么?
一款在浏览器中用 three.js 实时渲染的 3D 日本河谷小船之旅,涵盖四季与全天时段。 桜幻想是一个可交互的实时 3D 场景:你乘坐一艘茅草顶的河船,沿日本河谷顺流而下,途经樱花林荫道、朱红太鼓桥、五重塔村落、竹林峡、千本鸟居和湖泊。植被基于真实日本植物的摄影测量扫描制作,光照随一天的太阳位置变化,天气包括晴、雾、雨、暴风和雪五种。
sakura-fantasy 可以免费使用吗?用的什么许可证?
sakura-fantasy 以 Other 许可证开源。用于商业产品前,请先确认许可证条款。
sakura-fantasy 还在维护吗?
活跃维护中。sakura-fantasy 最近一次提交是在 2026年10月19日。
sakura-fantasy 适合用来做什么?
学习 three.js 中的实时 WebGL 渲染技术。 研究浏览器中的程序化场景生成与细节层级(LOD)加载。 参考如何使用 Web Audio API 实现生成式音乐。 作为独立的交互式 3D 环境场景来欣赏。
sakura-fantasy 怎么安装和运行?
克隆仓库: git clone https://github.com/billpwchan/sakura-fantasy.git 进入项目文件夹: cd sakura-fantasy 安装依赖: npm install 启动开发服务器并访问 http://127.0.0.1:5190: npm run dev
在哪里获取 sakura-fantasy?
源代码和安装说明在 GitHub 上:https://github.com/billpwchan/sakura-fantasy

概要由 AI 根据项目 README 生成;GitHub 数据每日更新。

相关项目