Automatic collision bounding boxes for gltfjsx mesh groups

[rishabhaggarwal2]

Is there an easy way to get bounding boxes and useCannon on the different mesh groups returned by gltfjsx? Trying to make a game where the world is exported as a glb model and want to make the player collide with the different buildings / obstacles in the glb file.

[drcmda]

you can get bounds from the returned geometry https://threejs.org/docs/index.html#api/en/core/BufferGeometry.computeBoundingBox

const { nodes } = useLoader(...)
const bounds = useMemo(() => {
  node.foo.geometry.computeBoundingBox()
  return node.foo.boundingBox()
}, [nodes])

[drcmda]

for more complex shapes where a box wouldnt be good enough use a convexpolyhedron: https://github.com/react-spring/use-cannon/blob/master/examples/src/demos/ConvexPolyhedron.js

[AlexanderInglis]

It seems this link is no longer active, do you have an example of an updated solution

[rishabhaggarwal2]

Thanks for the quick response @drcmda

So I tried the first step of loading the model in using gltfjsx and on my environment, I was get the scene variable to populate but nodes and materials were empty. Testing in codesandbox, all scene, nodes and material happen to be null for some reason.

https://codesandbox.io/s/mystifying-cloud-8rm3k?file=/src/World2.js

[drcmda]

this sandbox is using an ancient r3f. all the node/material stuff didnt exist in version 3. click the little refresh symbol next to the react-three-fiber entry and it'll start to work instantly.

[rishabhaggarwal2]

Thanks a lot for your help! That solved the issue :D