Repolode
Submit
billpwchan

billpwchan/sakura-fantasy

A browser-based 3D boat journey down a Japanese river valley, rendered live with three.js across four seasons and any hour of the day.

View on GitHubWebsite
Stars
98
Forks
6
Open issues
1
Last commit
yesterday

What is it?

Sakura Fantasy is an interactive real-time scene in which you ride a reed-roofed river boat down a Japanese valley. The route passes through cherry avenues, a vermilion drum bridge, a village under a five-storey pagoda, a bamboo gorge, a tunnel of torii gates and a lake. Vegetation is built from photogrammetry scans of real Japanese plants, and the lighting follows the sun through the day with five weather states: clear, mist, rain, storm and snow.

The score is generated as you travel, using koto, shakuhachi and shō in Japanese modes, mixed with field recordings of temple bells and Kyoto garden sounds placed by location, season and hour. The codebase is about 10,000 lines of plain JavaScript on three.js, with no game engine or framework. Visitors can steer, change season, hour and weather, switch camera modes, and export photos; URL parameters can open any scene directly.

The project ships with a build step that outputs a static site, and the assets are included in the repository.

Key features

  • 01Procedural valley with photogrammetry-based plants and seasonal change.
  • 02Dynamic sun, sky, fog and five weather states.
  • 03Water reflections, wakes, foam and petals rendered in real time.
  • 04Live generative score with Japanese instruments and location-placed recordings.
  • 05Keyboard controls, multiple camera modes and PNG photo mode.
  • 06URL parameters to jump to any season, hour, weather or position.

Use cases

  • Studying real-time WebGL rendering techniques in three.js.
  • Exploring procedural world generation and level-of-detail streaming in the browser.
  • Using it as a reference for generative audio with the Web Audio API.
  • Viewing an ambient, interactive 3D scene as a standalone experience.

Quick start

  1. 1

    Clone the repository

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

    Enter the project folder

    cd sakura-fantasy
  3. 3

    Install dependencies

    npm install
  4. 4

    Start the dev server and open http://127.0.0.1:5190

    npm run dev

Things to know

  • The license field is listed as NOASSERTION; the README says the code is MIT and assets have their own licences listed in CREDITS.md, so check those terms before reuse.
  • Phones and tablets are served a reduced quick tier, and the README's performance figures come from a high-end Apple M4 Max.

Topics

#3d#threejs#webgl#procedural-generation#real-time-rendering#web-audio#generative-music#creative-coding#ai-generated#browser-game

FAQ

What is sakura-fantasy?
A browser-based 3D boat journey down a Japanese river valley, rendered live with three.js across four seasons and any hour of the day. Sakura Fantasy is an interactive real-time scene in which you ride a reed-roofed river boat down a Japanese valley. The route passes through cherry avenues, a vermilion drum bridge, a village under a five-storey pagoda, a bamboo gorge, a tunnel of torii gates and a lake. Vegetation is built from photogrammetry scans of real Japanese plants, and the lighting follows the sun through the day with five weather states: clear, mist, rain, storm and snow.
Is sakura-fantasy free to use? What license does it have?
sakura-fantasy is open source under the Other license. Check the license terms before using it in commercial products.
Is sakura-fantasy still maintained?
Actively maintained. The last commit to sakura-fantasy was on Oct 19, 2026.
What can I use sakura-fantasy for?
Studying real-time WebGL rendering techniques in three.js. Exploring procedural world generation and level-of-detail streaming in the browser. Using it as a reference for generative audio with the Web Audio API. Viewing an ambient, interactive 3D scene as a standalone experience.
How do I install sakura-fantasy?
Clone the repository: git clone https://github.com/billpwchan/sakura-fantasy.git Enter the project folder: cd sakura-fantasy Install dependencies: npm install Start the dev server and open http://127.0.0.1:5190: npm run dev
Where can I get sakura-fantasy?
The source code and installation instructions are on GitHub: https://github.com/billpwchan/sakura-fantasy

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects