- Published on
Kissaten Diorama
Kissaten Diorama is an interactive diorama of a Japanese coffee house, a kissaten, that runs in the browser. The scene is headed 日向珈琲.
What you can do
- Drag to look around, scroll to zoom, and double-click to reset the view.
- Switch between day, sunset and night, or let the lighting follow your own time of day and season.
- Visit five cafes: Tokyo, San Francisco, New York, Paris and Seoul. Each has its own colors, menu, prices, sign, wall art and window skyline.
- Watch the weather outside the window: clear, rain, snow and storms with lightning.
- Take control of the panda and walk it around with the keyboard, or with an on-screen joystick on phones. A "Grand cafe" option grows the shop to four times the floor area, with a lounge, a library, a dining hall with a piano and a garden terrace.
Little details
A panda coder works at a laptop, and now and then walks to the restroom, fetches coffee from the bar, munches bamboo, or naps on a tatami bed in the corner. The clock keeps time, the lamps and plants sway, steam rises, coffee drips, a lucky cat waves, and a waitress serves the tables. A rainy-day track plays with rain, wind, thunder, cup and cat-bell sounds.
How it's built
The whole diorama is one page, built from simple shapes with Three.js. It works on phones with lighter rendering and touch controls.
Credits
The people are rigged avatars posed in code, using models from open-source projects: the TalkingHead avatars and the three.js examples.