- Three.js
- Cannon.js
- WebGL
- Game Physics
- Web Audio
Stack game with Three.js and Cannon.js. Venturing into WebGL and game physics.
A browser game built with Three.js and Cannon.js, a foray into WebGL and real-time physics. Stack blocks as high as you can by dropping each one when it lines up with the tower. Miss and the overhang grows; keep the stack steady to beat your score.
Features
- Real-time physics: Cannon.js for gravity, collision and stacking; blocks shrink to fit overhangs
- WebGL rendering: Three.js with orthographic camera and simple 3D blocks
- Controls: Click, tap or press Space to drop a block when it’s over the stack
- Sound: Web Audio API for drop and game-over feedback
Architecture
- Game loop: A single-page experience: Three.js renders the scene while Cannon.js advances the physics world each frame.
- Orthographic stack: Camera and block spawning tuned for a clean “stacking tower” read without perspective distraction.
- Input to simulation: Pointer and keyboard events map to drop timing; physics determines settle and game-over conditions.
Tech Stack
- Three.js: Scene graph, meshes, materials, and WebGL rendering.
- Cannon.js: Rigid-body simulation for drops, collisions, and stack stability.
- WebGL: GPU-accelerated drawing in the browser.
- Game Physics: Tuned masses, friction, and collision rules for stack behaviour.
- Web Audio: Short cues for actions and failure states without external assets required.
