A 3D Tetris experience built with Three.js, featuring realistic PBR materials, HDRI environment lighting, bloom post-processing, and a clean glassmorphism UI.
- Realistic 3D Rendering : PBR materials with clearcoat, HDRI environment reflections, soft shadows, and UnrealBloom post-processing
- Full Tetris Gameplay : SRS rotation with wall kicks, 7-bag randomizer, hold piece, ghost piece, lock delay, DAS
- Visual Polish : Particle effects on line clear, emissive block glow, camera drift, ambient starfield
- Sound Design : 8 game sound effects + atmospheric ambient background music
- Clean UI : Glassmorphism panels, smooth animations, score/level/lines tracking, next piece queue, hold preview
- Controls : Full keyboard support with DAS (Delayed Auto Shift)
| Key | Action |
|---|---|
← / → or A / D |
Move piece |
↓ or S |
Soft drop |
↑ or W or X |
Rotate clockwise |
Z |
Rotate counter-clockwise |
Space |
Hard drop |
C or Shift |
Hold piece |
P or Esc |
Pause |
Enter |
Start / Restart |
- Three.js r160 — 3D rendering engine
- Web Audio API — Sound playback
- Vanilla JS / CSS / HTML — No build tools required
All assets are free to use:
- HDRI: Studio Small 09 by Poly Haven (CC0)
- Sound Effects: Mixkit Free Sound Effects
- Background Music: "Vastness" by Andrew Ev from Mixkit
- A modern web browser with WebGL support
- Python 3 (for local server) or any static file server
# Clone the repository
git clone https://github.com/abhirupvgunakar/tetris.git
cd tetris
# Start a local server
python3 -m http.server 8080
# Open in your browser
open http://localhost:8080Note: You must use a local server (not
file://) because the game uses ES modules and fetch for assets, which require proper HTTP origins.
tetris3d/
├── index.html # Main page + UI overlays
├── css/
│ └── style.css # Glassmorphism UI styling
├── js/
│ ├── tetris.js # Game logic (SRS, scoring, 7-bag)
│ ├── audio.js # Audio manager (SFX + BGM)
│ └── main.js # Three.js rendering + game loop
└── assets/
├── hdri/
│ └── studio_small_09_1k.hdr # Environment map
└── sounds/
├── move.wav
├── rotate.wav
├── piece_lock.wav
├── line_clear.wav
├── hard_drop.wav
├── hold.wav
├── level_up.wav
├── game_over.wav
└── bgm.mp3 # Background music
Code is provided as-is. Assets retain their original licenses (CC0 for HDRI, Mixkit Free License for sounds and music).