Using Physics in Three.js with Ammo.js – Introduction

Introduction

The strong progression of web technologies, such as WebGL, has allowed the emergence of more and more innovative content on the Internet !

These new technologies open the door to new uses, such as the field of video games, augmented or virtual reality.

However, these topics are often highly demanding. Three.js is an extremely powerful and complete library, but, some features are not natively proposed !

This is the case of the physical simulation, not natively proposed by Three.js.

The JavaScript physics simulation engines

There are several JavaScript physics engines, all with different specificities and uses.

Here are some examples:

• Cannon.js
• Physijs
• Box2Djs
• Planck.js
• Ammo.js
• … and many others !

To include physics in our Three.js universe, we will use Ammo.js !

Why choose to use Ammo.js ?

Ammo.js is a JavaScript physics engine with an interesting background, it is a direct port of Bullet physics engine (a C++ physics engine) with Emscripten ! So they are theoretically functionally identical.

A little anecdote: “Ammo” signifies “Avoided Making My Own js physics engine by compiling bullet from C++” !

Ammo.js is totally free and open-source, and interfaces very well with Three.js. So it’s a perfect candidate for us !

Why and When should we use a Physics engine?

Implementing physics in a 3D application is not essential, there are many successful projects that do not use physical simulation. But in some cases it is an almost mandatory option !

It is for example impossible to imagine a game like Angry Birds without physical simulation.

A few years ago, a friend working in a web agency needed to implement a “Pétanque” ( French outdoor game ) game into a website. For this, he used Three.js paired with a physics engine !

Using a physics engine is envisageable if your projects necessitates thematics of gravity, push, complex collisions, shock between two elements, friction, resistance, constraint of movement or any physical concept !

Using a physics engine with Three.js

This article is the introduction of a series of chapters about the coupled use of Three.js and Ammo.js. We will discover how to properly use a physics engine through a series of examples.

Here is an overview of a basic project that we will do later :

To start using the Three.js and Ammo.js duo, follow the guide :

Understanding and Utilizing Physics in Three.JS with Ammo.js : The Basics