A 3D atmospheric exploration experience built with Three.js, React, and TypeScript
** Live Demo:** calm.bokorarmin.com
Step into three hauntingly beautiful nocturnal environments during a relentless downpour. This immersive 3D experience combines atmospheric visuals, spatial audio, and intuitive controls to create a contemplative journey through rain-drenched landscapes.
- Three Distinct Environments: Explore urban alleys, dense forests, and mysterious transitional spaces
- Dynamic Rain System: Realistic precipitation with audio-visual synchronization
- Atmospheric Audio: 3D spatial sound design with layered rain, ambient, and environmental effects
- First-Person Navigation: Smooth movement through each location
- Dark Aesthetic: Moody lighting and shadow play for maximum immersion
Navigate through rain-slicked city streets flanked by towering buildings, flickering neon signs, and overflowing alleyways. Watch water cascade from fire escapes and collect in shimmering puddles.
Wander through a dense woodland where rain patters on leaves, drips from branches, and soaks into mossy ground. Ancient trees stand as silent sentinels in the downpour.
A transitional zone where environments blend—part architecture, part nature, wholly mysterious.
** HEADPHONES RECOMMENDED | VOLUME UP ADVISED**
The rain audio is essential to the experience. You'll hear:
- Stereo rain layers (heavy downpour, individual drips, distant showers)
- Environmental reverb unique to each location
- Subtle ambient cues that respond to your position
- Spatial audio effects for maximum immersion
- Node.js
- npm or pnpm
- Clone the repository:
git clone https://github.com/bokorarmin/calm-3D
cd midnight-wanderer- Install packages:
pnpm i- Run application:
pnpm dev