Interactive 3D diorama · 2026

My Little Universe 我的小宇宙

Real memories with friends rebuilt as tiny low-poly dioramas, where everyone lives on: they wander, chat, rehearse their lines and stop to wave when you tap them.

RoleConcept, 3D, character behaviour, sound, front-end
Year2026
StackBabylon.js, React, TypeScript, Web Audio API
My Little Universe 我的小宇宙

Challenge

Turn a handful of photos into places you can step back into. A memory should feel alive rather than frozen: friends who behave like themselves, recognisable details, and a mood that matches the night it was taken. And it all has to run in a phone browser.

Approach

Each memory starts from a photo: pick the two or three objects that make the moment recognisable, simplify the rest into reusable procedural props, and cast friends as chibi actors with their own hair, height, pace and chattiness. A small behaviour engine has them wander round the scenery, pair up for conversations, take breaks, pose for group selfies and react to each other's lines. The original photo lies somewhere on the set as a Polaroid you can pick up. A film-camera mode plays wide, sliding and close-up shots with letterbox subtitles, and everything you hear, from each actor's babble voice to the music-box waltz, is synthesized live with the Web Audio API.

Outcome

Live in the browser with four memories: 排练室里的《小院》, 《青春禁忌游戏》 in the rehearsal room or on the 成电会堂 stage, 可怜的树 from two photos taken four years apart, and 某次无关未来的录音, a recording session with a tiny auditorium beside it that people jump across to. Merging static geometry and caching the mirror's reflection took a scene from about 2,000 draw calls to about 370 per frame. Visitors can leave messages that, once approved, become part of what a character says.

Drag to look around, tap people and the things that carry a story. Long-press someone to pick them up.

Next project Hanzi Hero 字海残卷 →

Have a project in mind?