https://github.com/ferdikoomen/mini
A WebGL and Physics engine demo that allows you to jump a Mini Cooper S straight through a wall of boxes.
https://github.com/ferdikoomen/mini
physics threejs typescript webgl webpack
Last synced: about 1 year ago
JSON representation
A WebGL and Physics engine demo that allows you to jump a Mini Cooper S straight through a wall of boxes.
- Host: GitHub
- URL: https://github.com/ferdikoomen/mini
- Owner: ferdikoomen
- License: mit
- Archived: true
- Created: 2017-09-21T14:09:13.000Z (almost 9 years ago)
- Default Branch: main
- Last Pushed: 2024-04-05T13:48:08.000Z (about 2 years ago)
- Last Synced: 2025-03-15T05:16:08.735Z (over 1 year ago)
- Topics: physics, threejs, typescript, webgl, webpack
- Language: TypeScript
- Homepage: https://mini.madebyferdi.com
- Size: 39.8 MB
- Stars: 9
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# WebGL demo of a MINI Cooper
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](https://www.mini.co.uk).
Initially this project started out as a research project to learn WebGL: How to export models from [Blender](https://www.blender.org), import them in [Three.js](https://threejs.org), assign materials, create lights, etc. However, along the way I stumbled upon this fascinating [Ammo.js vehicle example](http://kripken.github.io/ammo.js/examples/webgl_demo_vehicle/index.html) 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](https://www.cgtrader.com)
- Written in [TypeScript](https://www.typescriptlang.org)
- WebGL via [Three.js](https://threejs.org)
- Physics via [Ammo.js](https://github.com/kripken/ammo.js)
- Build using [Webpack](https://webpack.github.io)
## Screenshots
## Demo
- 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
## Libraries
- [Three.js](https://threejs.org)
- [Emscripten](http://kripken.github.io/emscripten-site)
- [Ammo.js](https://github.com/kripken/ammo.js)
## Install
```shell
yarn install
```
## Run
```shell
npm start
```
## Release
```shell
npm run release
```