(click anywhere to close)

[Three.js] More Physics!

category: Games | course: Threejs | difficulty:

Now it's time to create your first meshes with a fully functional physics body! (and more of course)

Basic Shapes

Below are the most common shapes Physijs currently supports (there are a few more, but those are not important right now)

  • Physijs.PlaneMesh- infinite zero-thickness plane
  • Physijs.BoxMesh- matchesTHREE.BoxGeometry
  • Physijs.SphereMesh- matchesTHREE.SphereGeometry
  • Physijs.CylinderMesh- matchesTHREE.CylinderGeometry
  • Physijs.ConeMesh- matchesTHREE.CylinderGeometry(tapered)
  • Physijs.CapsuleMesh- matchesTHREE.CylinderGeometry, except has two half spheres at ends

To use these, you'd simply replaceTHREE.Mesh with one of the Physijs equivalents you'd like to use. Then, as usual, you'd supply the geometry and material, and lateradd it to the scene.

Do note though, that THREE.PlaneMesh and Physijs.PlaneMesh are not completely analagous - the plane from Physijs is infinite. If you really want a Three.js plane with physics, use a very thin BoxMesh.

Also, Physijs.CapsuleMeshis usually good for humanoid player characters. Just saying.


Checking for collisions, is as simple as adding a collision event listener to a mesh.

mesh.addEventListener( 'collision', function( other_object, relative_velocity, relative_rotation, contact_normal ) {
    // `this` has collided with `other_object` 
    // with an impact speed of `relative_velocity` and a rotational force of `relative_rotation` 
    //and at normal `contact_normal`

However, there's always a certain problem when dealing with computer physics. It's possible that an object moving with a very high velocity collides with another object inbetween iterations/steps, and therefore no collision is detected. For performance reasons, the solution for this is automatically turned off by the physics system. But if you know some mesh will be moving with an enormous speed, you can turn it on and off yourself:

// Enable CCD Motion Clamping if the object moves more than 1 meter in one simulation frame

// The object gets an sphere inside of it to use for CCD, you can set the radius here (must be smaller than the object)

Collision Materials

Physijs can give some extra properties to a material, and thus to an object. These attributes arefrictionandrestitution (bounciness). These need to be set in a special Physijs material:

//Values between 0.0 and 1.0
var friction = .8;
var restitution = .3;

//Physijs Material - a three material/shader, friction, restitution
var material = Physijs.createMaterial(
    new THREE.MeshBasicMaterial({ color: 0x888888 }),

//Just apply it to the mesh like you always do
var mesh = new Physijs.BoxMesh(
    new THREE.BoxGeometry( 5, 5, 5 ),

Callbacks & Events

Because Physijs runs on a different thread than your main application, there is no guarantee that it will be able to iterate the scene every time you callscene.simulate. Because of this, you may want to attach an event listener to the scene that is triggered whenever the physics simulation has run.

var scene = new Physijs.scene;
scene.addEventListener( 'update', function() {
    // the scene's physics have finished updating

Additionally, if your scene is complex or has a lot of objects, the physics simulation can slow down to the point where adding new objects can become a lot of work for the application. To help alleviate some of the pain this may cause, objects have areadyevent which is triggered after the object has been added to the physics simulation.

var readyHandler = function() {
    // object has been added to the scene
var mesh = new Physijs.SphereMesh( geometry, material );
mesh.addEventListener( 'ready', readyHandler );
scene.add( mesh );

Compound Shapes

If you want to mix multiple shapes together into one object, which is used more often than you think, that can be done quite easily. It works exactly the same as in Three.js: you create the parent, then the child you want to add to it, and then you add this little line of code:

parent.add( child );
scene.add( parent );

//Remember, add all childs before adding the parent!
//And, child's positions are local/relative to the parent


There's a very good (and long...) wiki page on constraints by the creator of Physijs himself, and I didn't find a way to simplify and/or expand on it in this tutorial, so you can just go the the page here: Constraints Physijs

Do you like my tutorials?
To keep this site running, donate some motivational food!
Chocolate Milk