React-three-fiber - Add collision to imported blender gltf object?

Questions
, ,
1

Hello, I am new to this library and generally with three.js. How would I add collision to a object/mesh that was created and imported from blender (gltf)? For example, lets say I build a castle object in blender, and I want to walk around that castle (ramps, stairs and all) via FPS point of view an controls. How would I go about doing that.

I started playing around with adding collision to objects imported from blender, but it doesn’t seem to work… my player can still go through the mesh. I add collision to my player, and I know it works because I tested the player collision on the native boxes (with useBox) not imported from blender.

import Boxy from './assets/cubeTest.gltf';
export function BoxTest(props) {
  const {scene, nodes, materials } = useGLTF(Boxy);
  
  
    const [ref] = useBox(() => ({ mass:10, type: "Static",...props }))
    return (
      <group ref={ref}{...props} >
  
         <primitive object={scene} position={[2,2,2]}/>
         <mesh>
          <boxBufferGeometry args={[10, 10]}/>
          <meshBasicMaterial wireframe />
        </mesh>
       </group>
    );
}

^^ I can still go through the imported box. Any help would be appreciated. I tried some other variations but to no success. Thanks

2

I guess whats the issue here, is that a .gltf-model uses a empty “pseudo”-Mesh (root) without any vertices to collide. You would have to add collision on its child mesh (actual box mesh with vertices).

Example FPS Game Collision:

3 
import { Physics, RigidBody } from '@react-three/rapier'

<Physics>
  <RigidBody>
    <BoxTest />
  </RigidBody>

i wouldn’t use canon any longer, use rapier, it is way, way easier. also faster and you don’t have to approximate shapes any longer: GitHub - pmndrs/react-three-rapier: 🤺 Rapier physics in React

you’ll also find examples here React Three Fiber Documentation