sakura-crossing
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.
What is it?
What it is
An explorable 3D Japanese suburban neighborhood rendered to look like a hand-painted 2D animation background using Three.js.
Why it exists
To create a highly stylized, immersive environment where every visual element (signage, textures, geometry) is procedurally generated or drawn at runtime rather than using external image assets.
Who should use it
Developers and artists interested in Three.js, procedural generation, and 3D-to-2D rendering techniques. Suitable for those building immersive web experiences or studying environmental design.
Who should avoid it
Users without JavaScript/Three.js experience, or those seeking simple 2D projects. Avoid if lacking Node.js setup or hardware acceleration support.
How it works
A quick walkthrough in plain English
How sakura-crossing works
Step 1 of 3
You interact with it
Open sakura-crossing, send a request, or connect it to your stack.
Features
Advantages
- Extremely lightweight: only three.js and Vite dependencies
- No external image assets required for visual elements
- Highly scalable geometry through procedural generation
- Consistent visual style via custom post-processing and toon materials
- Zero-asset licensing for all visual content (MIT license)
- Efficient rendering via static geometry baking and instancing
Disadvantages
- High draw-call count due to many unique meshes
- Potential for 'tofu' characters on Linux systems lacking CJK fonts
- Performance cost from unculled instanced meshes
- Complexity in managing terrain/planet intersections (e.g., z-fighting risks)
Installation
native
npm install npm run play npm run dev
FAQ
How do I run the project locally?
First, ensure you have Node 18 or newer installed. Run `npm install` to install dependencies (three.js and Vite), then use `npm run play` to build and serve the production bundle on port 5179, or `npm run dev` to start a development server with HMR on port 5178.
Does the project require external image assets?
No. Every sign, fascia, lantern, and price strip is drawn at runtime using Canvas2D. The project uses a system font stack for Japanese characters, so it relies on your OS having CJK fonts installed to avoid 'tofu' boxes.
How do I use the e-bike to move around?
Locate a coral-colored e-bike and press `E` to mount it. Use `W` to accelerate (up to 7.65 m/s), `S` to brake or reverse, and `A`/`D` to steer. You can call the bike to your location or send it away by pressing `V` when standing within four metres of it.
What are the keyboard controls for exploration?
Use `W A S D` to walk, `Shift` to run, and the mouse to look. `E` is for interaction, `P` to orbit out to a planetary view, `M` to toggle music, `C` to show coordinates, and `R` to return to the opening view.
How can I add my own music to the experience?
Drop your audio files into the `public/audio/` directory and list the filenames in the `TRACKS` array at the top of `src/core/audio.js`. Note that the default track included in the repo is not covered by the MIT license.
Featured in Videos
YouTube tutorials and walkthroughs for sakura-crossing
Alternatives
Similar projects ranked by category, topics, and text overlap.
