Create CANNON.RigidBody from THREE.Mesh or THREE.Geometry

Question

I am creating a THREE.Mesh object using a THREE.JSONLoader object like so:

// Create castle.
loader.load(\'/Meshes/CastleTower.js\'         


        

Answer 1

I had a similar issue and created the necessary "points" and "faces" (as described in Cannon docs) from the THREE.Geometry (called geometry here) with these two functions:

cannonPoints = geometry.vertices.map(function(v) {
    return new CANNON.Vec3( v.x, v.y, v.z )
})

cannonFaces = geometry.faces.map(function(f) {
    return [f.a, f.b, f.c]
})

Answer 2

Well it depends on how exact the physical representatin of your model should be. I'm not very familiar with cannon.js, but here are some options I know:

• use "computeBoundingBox" and on your tower and create a cannon.js box with those bounds
• use "computeBoundingSphere" in a similar way
• use physics for a concave (i.e. arbitrary) mesh. This is the most performance consuming way. Cannon.js has an example here: http://schteppe.github.io/cannon.js/demos/bunny.html

A non cannon.js related approach would be to e.g. use Recast. Recast would load your .obj file for you and create a navigation mesh for you according to your settings. Then you could walk around there (absolutely great if you have a RTS birdview like game, or bots running around). A recast javascript port can be found here: https://github.com/vincent/recast.js

Hope this helps!