A WebGL and Physics engine demo that allows you to jump a Mini Cooper straight through a wall of boxes. Note that this is a personal project and is not directly related to MINI.
Initially this project started out as a research project to learn WebGL: How to export models from Blender, import them in Three.js, assign materials, create lights, etc. However, along the way I stumbled upon this fascinating Ammo.js vehicle example and decided to use that as a base for this demo.
I also wanted this demo to work on an iPhone or iPad, so I've created two quality levels: (1) A low-quality mode that has no antialiasing, no shadows and uses a low-poly model. (2) A high-quality mode that has antialiasing, real-time shadows and a LOD model, that switches between low-poly and high-poly based on the distance to the camera. The mobile version automatically selects the low-quality mode and displays an overlay with touch controls, allowing you to drive the car around using your mobile as a gamepad.
Some technical details:
- Model via CG Trader
- Written in TypeScript
- WebGL via Three.js
- Physics via Ammo.js
- Build using Webpack
- https://mini.madebyferdi.com
- ↑ = Accelerate
- ↓ = Brake / reverse
- ← = Steer left
- → = Steer right
- p = Pause physics engine
- n = Next step (when paused)
- t = Turbo mode
- spacebar = Reset car
yarn installnpm startnpm run release