Learning Three.js

or WebGL for Dummies

Realistic Physics for Your 3D Game With THREEx.Oimo Game Extension for three.js

This is post is part of the ‘one threex a day’ challenge. This challenge is to publish every day one game extension for three.js! One per day, every day and that for 2month! In this post, we gonna talk about threex.oimo. threex.oimo is a threex game extension for three.js. It provides a realistic physics easy to include in your own games. So you can take objects in your game and make them fall as if it was the real world! You can code a pool game in a day! You make rocks fall from the sky in a realistic fashion! Sky is the limit! It is a warper over the excelent library oimo.js physics library. lo-th, the author does a lot of crazy things! Be sure to check it out!

To see the other posts about one threex a day and forget our moto! “A THREEx extension a day, gets your game on its way!”

Show Don’t Tell

How To Install It

You can install it via script tag

1
 <script src='threex.oimo.js'></script>

Or you can install with bower, as you wish.

1
bower install threex.oimo

How To Use It

Well first you need to create a oimo.js world. You do that like this

1
var world   = new OIMO.World()

Then, at every frame, update your mesh position/rotation.

1
world.step()

Then you need to create physics bodies and make them move

.createBodyFromMesh()

It will create the IOMO.Body from a three.js mesh you give it. Currently it support THREE.CubeGeometry and THREE.SphereGeometry. First create a normal THREE.Mesh

1
2
3
4
var geometry    = new THREE.CubeGeometry(1,1,1)
var material    = new THREE.MeshNormalMaterial()
var mesh    = new THREE.Mesh( geometry, material )
scene.add(mesh)

Then you create the IOMO.Body for it

1
var body    = THREEx.Iomo.createBodyFromMesh(world, mesh)

.Body2MeshUpdater()

It will update the position/rotation of a THREE.Mesh based on a position/rotation of a IOMO.Body. You need this to see your meshes moves according to oimo.js physics. First you create the object

1
var updater = new THREEx.Iomo.Body2MeshUpdater(body, mesh)

Then, at every frame, update your mesh position/rotation.

1
updater.update()

.Stats()

It will display statistic from oimo.js, it may be useful to know what is going on. It acts very much like mrdoob’s stats or threex.rendererstats.

1
2
var oimoStats   = new THREEx.Iomo.Stats(world)
document.body.appendChild(oimoStats.domElement)

Then, at every frame, update it.

1
oimoStats.update()

Comments