# Using loaded gltf geometries as shape for cannon.js

**URL:** <https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [May 28, 2020, 12:16am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632 "2020-05-28T00:16:33Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![noone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noone/32/5197_2.png) [@noone](https://discourse.threejs.org/u/noone)\
**Post date:** [May 28, 2020, 12:16am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/1 "2020-05-28T00:16:33Z")

</div>

How can use a loaded gltf geometries as a shape for the physics body?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 28, 2020, 12:31am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/2 "2020-05-28T00:31:54Z")

</div>

Depending on your physics engine, maybe [three-to-cannon](https://github.com/donmccurdy/three-to-cannon) or [three-to-ammo](https://github.com/InfiniteLee/three-to-ammo)? Note that it’s usually best to represent models with some simpler geometry like a box, cylinder, a convex hull, or a combination of these shapes. A full concave shape is difficult to simulate in a physics engine, and may run into bugs.

---

<div class="post-metadata">

**Author:** ![noone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noone/32/5197_2.png) [@noone](https://discourse.threejs.org/u/noone)\
**Post date:** [May 28, 2020, 12:45am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/3 "2020-05-28T00:45:27Z")

</div>

Thank you. Is there a way to this without using a library. so basically i have 2 gltf, one is the actual 3d object and the other one is just a geometry that kinda much the shape of other gltf. i just want to use the other gltf to be the shape.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [May 28, 2020, 12:59am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/4 "2020-05-28T00:59:42Z")

</div>

What physics engine are you using? I’m most familiar with Cannon.js, and it can’t load models from a file like three.js does. You’ll need to either use one of these libraries, or inspect their code to see how they do the conversion from a three.js Mesh to a shape for the physics engine.

---

<div class="post-metadata">

**Author:** ![noone](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/noone/32/5197_2.png) [@noone](https://discourse.threejs.org/u/noone)\
**Post date:** [May 28, 2020, 1:10am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/5 "2020-05-28T01:10:22Z")

</div>

I’m sorry for the confusion i’m actually using three.js + cannon.js

basically i have a object.glb and collision.glb

i’m using cannon.js and i was able to load a gltf file. the only thing i’m struggling with is using a the collision.glb as the shape of new CANNON.Body(). Is that make sense?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [June 9, 2020, 2:39am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/6 "2020-06-09T02:39:42Z")

</div>

Turning an arbitrary mesh into a performant physics object is not always easy. I’ve linked above to a project (three-to-cannon) that includes code for several different ways of doing so — i think you’ll need to inspect that code and attempt to implement what you need. If you get stuck you can always share code or a demo here for help.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [June 9, 2020, 7:50am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/7 "2020-06-09T07:50:36Z")

</div>

Here is something similar.

> **[Threejs Cannonjs Convex Polyhedrons from Collision Mesh - CodeSandbox](https://codesandbox.io/s/threejs-cannonjs-convex-polyhedrons-from-collision-mesh-fcfz2?file=%2Fsrc%2Fclient%2Fclient.ts)**
>
> https://sbcode.net/threejs/compounds-versus-convex-polyhedrons/

  
It is loading an OBJ, with a collision shape in it as one of its children. The model was created in blender. It is conceptually the same as creating a separate mesh to be used as the collision shape in cannonjs.  
See lines 71-79 in client.ts where I traverse the loaded object.

In the client.ts, look at line 89 where I convert the mesh into a convex polyhedron. Then go to its definition and you can see what it does. There is a fair amount of reverse engineering for you to do.

My conclusion was, this is a slow approach. It is easy to create collision meshes, but when used in cannonjs, it is very slow. There is only 10 monkey heads on this demo, my collision shape only has a few vertices. Also, you need to make sure you have no faces facing inwards. You will get loads of console errors telling you this. There is lots of trial of error to solve during your creation phase.

Now look at this,  
[https://sbcode.net/threejs/compounds-versus-convex-polyhedrons/](https://sbcode.net/threejs/compounds-versus-convex-polyhedrons/)  
In this demo, I use compound shapes, consisting of spheres. It is way better performance than trying to convert a mesh to a convex shape to be used in cannonjs.

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [January 4, 2024, 8:48am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/8 "2024-01-04T08:48:50Z")

</div>

![Screen Shot 2024-01-04 at 4.47.24 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ffba52a2b7381dc63bab0a6e1ad28fbbccc2e092.jpeg)

You can use threejs [threeverse](https://github.com/VeinSyct/Threeverse) engine to load gltf assets with gltf collision this would be easier to accomplish creating an open world or any threejs virtual experience or games.

The threeverse three-to-cannon automatically takes the gltf collision model shape in a cannon physics collider.

[Demo](https://theneoverse.web.app/#virtualtour&&tours=edge-apartment)

[Source](https://theneoverse.web.app/#fSN20251022002)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 4, 2024, 11:30am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/9 "2024-01-04T11:30:37Z")

</div>

cannon.js has not been maintained for like 10 years. take a look at cannon-es [GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript.](https://github.com/pmndrs/cannon-es) this is the semi-maintained version with critical bugfixes, especially for convex polyhedrons or hulls which you will need.

then again, cannon is awfully slow handling convex. the original cannon.js doesn’t handle it imo at all, cannon-es does somewhat support it but it’s aching and performance will be bottom tier. here’s one such example turning a gltf model into a convex hull [Physics with convex-polyhedrons - CodeSandbox](https://codesandbox.io/s/physics-with-convex-polyhedrons-08s1u) (the example uses cannon-es + rt/cannon)

i think it would help if you can still re-consider, something like rapier handles convex with good performance. and imo pairing three to react would also make sense because you get things like this [GitHub - pmndrs/react-three-rapier: 🤺 Rapier physics in React](https://github.com/pmndrs/react-three-rapier) where you can effortlessly drop entire models into physics rigid bodies. see:

> **[Ecctrl + Fisheye - CodeSandbox](https://codesandbox.io/s/nvk9pf)**
>
> Ecctrl + Fisheye by drcmda using @react-three/drei, @react-three/fiber, @react-three/rapier, @use-gesture/core, ecctrl, react, react-dom, three

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [January 5, 2024, 12:40am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/10 "2024-01-05T00:40:25Z")

</div>

Cannon was updated 2 years ago not 10 years. Cannon is the fastest and reliable in all available JavaScript physics. There is just one imperfection in Cannon, the trimesh and polyhedron. The trimesh collides only with sphere and plane and polyhedron collides with all body types but it’s too taxing for the CPU specially when polyhedron is made from complex glft mesh and in numbers. So its a trade off between speed and collisions.

Threejs Threeverse allows you to create both trimesh and polyhedron from glft mesh.

Check out [ThreeJs + Cannon](https://discourse.threejs.org/t/threejs-cannon-virtual-experience-engine/39402/42) and [Threeverse Project](https://discourse.threejs.org/t/threeverse-project/51531/22) showcasing the usage of cannon-es for an threejs open world 3d browser gamings.

Presse button period (.) to reveal cannonjs bodies to debug cannonjs physics.

Open world [cannonjs physics](https://theneoverse.web.app/#threeviewer&&crateria) demo

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [January 5, 2024, 10:04am UTC](https://discourse.threejs.org/t/using-loaded-gltf-geometries-as-shape-for-cannon-js/15632/11 "2024-01-05T10:04:21Z")

</div>

i mean the original cannon.js by schteppe, [GitHub - schteppe/cannon.js: A lightweight 3D physics engine written in JavaScript.](https://github.com/schteppe/cannon.js)

 ![Screenshot 2024-01-05 at 11.02.09](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/b/6bf1fc55b1956b46b1b181f6d653fd484a9cf76e.jpeg)

cannon-es is maintained by us (pmndrs) [GitHub - pmndrs/cannon-es: 💣 A lightweight 3D physics engine written in JavaScript.](https://github.com/pmndrs/cannon-es) (i’m a core maintainer). all we can do is keep it on life support, merge critical bugfixes, but the library isn’t moving forward. cannon remains the slowest and oldest physics engine around, there are better alternatives out there now. rapier feels like a thousand times faster, especially pushing convex objects.

rapier also handles trimesh effortlessly, the tube in this example for instance is a trimesh, i don’t think this is even possible in cannon, or at least i’ve never seen it do that:

> **[Rapier physics - CodeSandbox](https://codesandbox.io/s/7e9y1b)**
>
> Rapier physics by drcmda using @react-three/drei, @react-three/fiber, @react-three/rapier, @types/react, @types/three, leva, react, react-dom, react-scripts

(rapier is just a suggestion ofc)