
react
React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
Sakura Crossing is a browser-based 3D exploration of a Japanese suburban neighborhood in blossom season, built with Three.js and rendered to mimic a hand-painted 2D animation background using runtime shaders and no pre-made image assets.
113
No data
22
0
MIT
2026-07-29
It achieves a complete 2D cel-shaded look entirely through real-time rendering techniques (toon material, screen-space ink, post-processing) without any sprite or texture assets, and features a spherical world with a seamless railway loop, interactive e-bike, and 22 interactable objects.
An explorable Japanese suburban neighbourhood in blossom season, built as a real 3D scene in Three.js and rendered to look like a hand-painted 2D animation background.
Every sign, fascia, lantern and price strip above is drawn at runtime with Canvas2D — there is not one image asset in src/. The lines are a screen-space second difference of depth, not an edge filter. See How the 3D-to-2D look is built. |
It starts at a level crossing and grows outward from there: a shopping street, a community shrine up a flight of stone steps, a high school on the rise behind the station, a pedestrian overbridge, a branch library, a residential lane, two back alleys, a summer-festival ground caught mid-preparation, a community-bus turnaround at the far corner where the estate runs into a hillside, and the housing in between — with a drainage channel running the width of the town between two arms of a range of low hills, and a railway that goes the whole way round the planet and through the hills twice on its way. There are no people anywhere in it, and there are not meant to be — everything the place has to say about itself is said by what has been left out, pinned up, parked or forgotten.
Needs Node 18 or newer, and nothing else — three.js and Vite are the only two dependencies.
npm install
npm run play # build + serve the production bundle, port 5179 — just want to play
npm run dev # dev server with HMR, port 5178 — for working on it
Then open the printed URL and click to explore. Keep the terminal open; closing
it stops the server. A plain file:// open will not work — the project is ES
modules, so it needs to be served over HTTP.
| key | |
|---|---|
W A S D | walk |
Shift | run |
| mouse | look |
E | interact — and get on / off the e-bike |
V | call up the e-bike (again to send it away, or to call it back to you) |
P | orbit out and look at the whole planet |
M | music on / off |
C | show coordinates (flat x/z/y, yaw, and a ready-made camera line) |
Shift+C | copy that line to the clipboard (or click the readout) |
R | return to the opening view |
H | hide / show the hint line |
Esc | release the cursor |
O / G | toggle the ink pass / the colour grade (to see what they do) |
The background-music
An explorable Japanese suburban railway-crossing neighbourhood on a small planet, rendered 3D-to-2D as a cel-shaded anime background. Three.js, no image assets.
Similar projects matched by category, topics, and programming language.

React is a JavaScript library for building user interfaces with declarative, component-based, and cross-platform design.
A GPT‑image powered app that extracts individual garment cutouts from photos, organizes them into a digital wardrobe, and generates modeled outfit previews.
A browser-based first-person shooter built entirely with procedural generation and orchestrated AI agents, featuring 55k lines of Three.js/WebGL2 code and no art assets.