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

Answers:

Answer

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!

Answer

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]
})

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.