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);

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"?


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...



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:

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:

Hope this helps!


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 = {
    return new CANNON.Vec3( v.x, v.y, v.z )

cannonFaces = {
    return [f.a, f.b, f.c]


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.