Learning Three.js

or WebGL for Dummies

Lets Make a 3D Game: microphysics.js, Even Easier

This post is part of the “Lets make a 3D game” series. It is a follow up from the previous article on microphysics.js. It will describe how to easily include microphysics.js in your three.js games. THREEx.microphysics.js is a THREEx wrapper for microphysics.js. It helps binding three.js objects to microphysics.js. The API is chained for convenience.

Let’s get started

So lets see how to use it. First step, you download it here. Then include it in your own code with this line.

1
<script src="THREEx.microphysics.js"></script>

Initialisation

You instanciate the physics engine, like that.

1
var microphysics = new THREEx.Microphysics(opts);

opts is optional. opts.timeStep controls the frequency of the world update. The smaller it is the more accurate is the physics but the longer it is to compute. It defaults to 1/60. Once instanciated, you start it.

1
microphysics.start();

Binding THREE.Mesh

Of course we need to add some mesh in the world. After this line, the mesh is bound to microphysics.js, so its position is driven by the physics.

1
microphysics.bindMesh(mesh, opts);

mesh.position is honored. If you need to unbind a mesh, just do

1
microphysics.unbindMesh(mesh);

At the time of this writing, microphysics.js support only moving sphere and static boxes, so geometry may only be THREE.SphereGeometry or THREE.CubeGeometry. If your mesh got another geometry, use opts.geometry to say how you wish the mesh to be handled.

1
2
3
microphysics.bindMesh(mesh, {
     geometry : new THREE.CubeGeometry(200,200,200);
});

It is also possible to overwrite Mesh.position with opts.position, or to send options directly to microphysics.js with opts.physics.

1
2
3
4
5
6
microphysics.bindMesh(mesh, {
    // to overwrite the Mesh.position
    position  : { x : 1, y : 1, z : 2 },
    // to pass options directly to microphysics.js
    physics       : { restitution   : 0.98 }
});

Updating the physics

In your render loop, just add this line. It will first update the physics world and then move accordingly any THREE.Mesh you bound.

1
microphysics.update();   

Needs a Direct Access ?

If you need to have direct access to microphysics.js, uses microphysics.body(mesh) to get the vphy.Body bound to mesh. To access vphy.World, just use microphysics.word().

Conclusion

In the previous article on microphysics.js, we learned how to use microphysics.js directly. This article makes it really easy to include in your three.js demo/game. It is so nice that it is what is used in the playground. That’s all for today folks. Have fun :)

Comments