Search code examples
javascriptthree.jscannon.js

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


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

// Create castle.
loader.load('/Meshes/CastleTower.js', function(geometry, materials) {
    var tmp_material = new THREE.MeshLambertMaterial();
    THREE.ColorUtils.adjustHSV(tmp_material.color, 0, 0, 0.9);

    var castle = new THREE.Mesh(geometry, tmp_material);
    castle.scale.set(0.2, 0.2, 0.2);
    castle.rotation.setX(-Math.PI/2);
    scene.add(castle);
});

Is it possible to create a CANNON.RigidBody from the THREE.Mesh (var castle) or THREE.Geometry (var geometry) object? Another way you could read this is: How do you make any custom THREE.Mesh "solid"?

Update

I used Blender, created a new castle from boxes, and exported it to the Three.js format. If you set the mass to 0 of a CANNON.Body, it remains static. This worked out perfectly...


Solution

  • 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!