Cannon.js complex shapes

Question

I need to know how can I generate a complex shape to integrate in my Three.js scene, with the benefit of Cannon.js physics.

I started from this example: http://schteppe.github.io/cannon.js/demos/bunny.html

Looking at the code, I noticed that the bunny is described with its faces and vertices in arrays. Seems pretty powerful but how can I do if I want to generate these arrays dynamically ?

For example, using only Three.js, it's possible to export a Blender model on json format and to load it inside the scene programmatically. I need to do the same thing for Cannon.js, but it doesn't seem to work the same way as Three.js with Blender models.

Thanks in advance

Answer 1

The bunny is made out of convex shapes that have been precomputed using a Convex Decomposition software called HACD. Convex decomposition is when you take a concave mesh and turn it into convex subshapes.

One solution is to do the same thing yourself: use a tool to make convex subshapes from a more complicated mesh. An alternative solution is to use simple built-in primitives such as spheres and boxes to build your physics shape. A shape that consist of several subshapes is called a compound shape (see the Cannon.js compound demo). Many game developers use this approach because it's a simpler workflow and provides better physics performance.

(Picture from Unity manual)

Answer 2

For the future readers, there is an example to convert a custom mesh to cannon body.

• First I'm using the v-hacd algorithm to convert concave shape into multiple convex shapes.
• Then I parse the wrl output file with this : https://gist.github.com/Anthelmed/688499e314122f493a8f1c9d3b299594
• And finally I generate a convex polyhedron with parsed data : https://gist.github.com/Anthelmed/976bb456db0bb3bd42ecda5dfa482a66

I hope you find this answer useful.