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

**URL:** <https://discourse.threejs.org/t/react-three-fiber-add-collision-to-imported-blender-gltf-object/41184>\
**Category:** Questions\
**Tags:** mesh, react-three-fiber, geometry\
**Created:** [August 8, 2022, 4:42am UTC](https://discourse.threejs.org/t/react-three-fiber-add-collision-to-imported-blender-gltf-object/41184 "2022-08-08T04:42:45Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![3dshib](https://avatars.discourse-cdn.com/v4/letter/3/34f0e0/32.png) [@3dshib](https://discourse.threejs.org/u/3dshib)\
**Post date:** [August 8, 2022, 4:42am UTC](https://discourse.threejs.org/t/react-three-fiber-add-collision-to-imported-blender-gltf-object/41184/1 "2022-08-08T04:42:45Z")

</div>

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.

```javascript
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

---

<div class="post-metadata">

**Author:** ![Atsutakemura](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/atsutakemura/32/30236_2.png) [@Atsutakemura](https://discourse.threejs.org/u/Atsutakemura)\
**Post date:** [October 21, 2022, 7:26pm UTC](https://discourse.threejs.org/t/react-three-fiber-add-collision-to-imported-blender-gltf-object/41184/2 "2022-10-21T19:26:08Z")

</div>

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:

> <https://github.com/mrdoob/three.js/blob/efbfc67edc7f65cfcc61a389ffc5fd43ea702bc6/examples/games_fps.html>

---

<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:** [October 21, 2022, 8:42pm UTC](https://discourse.threejs.org/t/react-three-fiber-add-collision-to-imported-blender-gltf-object/41184/3 "2022-10-21T20:42:27Z")

</div>

```javascript
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](https://github.com/pmndrs/react-three-rapier)

you’ll also find examples here [React Three Fiber Documentation](https://docs.pmnd.rs/react-three-fiber/getting-started/examples)