How to make 3D models draggable in React Three Rapier?

Questions
, ,
1

I ended up finding this:

But it doesn’t work with primitive tags to render 3D models, it only works with meshes. Can anyone help?

2

I’m not fluent in React, but if the physics component only works with meshes, as a workaround, try loading the model with useGLTF, extracting the child mesh and wrapping it with the physics tag.

Here is an interesting discussion about useGLTF, you might need to convert your model to gltfjsx:

3 Likes
3

Thanks for the answer, but I just tested out what you suggested, and it’s not working.

4

Sorry @Fennec , you were right!!! The problem solved using gltfJSX! JUST THANK YOU!

EDIT: Soon, I’ll share my codes!

For those want to know how I fixed the issue, follow these steps:

a. Install gltfJSX, here’s the link.

b. Write up this command to get your 3D model as a group tag: npx gltfjsx model.gltf --transform

c. You’ll be given something like this:

import React from 'react'
import { useGLTF, PerspectiveCamera } from '@react-three/drei'

export default function Model(props) {
  const { nodes, materials } = useGLTF('/model-transformed.glb')
  return (
    <group {...props} dispose={null}>
      <PerspectiveCamera makeDefault={false} far={2} near={0} fov={22.895} position={[-0.014, 0.062, -0.009]} rotation={[-1.716, -0.236, -2.13]} />
      <mesh geometry={nodes.Default_n3d7.geometry} material={materials.Package} position={[-0.004, 0, 0]} rotation={[0, 0, -0.014]} scale={[1.238, 1.127, 1]} />
    </group>
  )
}

useGLTF.preload('/model-transformed.glb')

d. All you have to is to inject the group tag as visibleMesh prop of DraggableRigidBody component, like this:

const model = useGLTF('/gltfjsxModel/model-transformed.glb')
//
<Physics gravity={[0, 0, 0]}>
        <DraggableRigidBody
              visibleMesh={
                <group dispose={null}>
                    <mesh
                      geometry={model.nodes.Default_n3d7.geometry}
                      material={model.materials.Package}
                      position={[-0.004, 0, 0]}
                      rotation={[0, ROTATION, ROTATION]}
                      scale={[1.238, 1.127, 1]}
                    />
                </group>
              }
            />
          </Physics>
1 Like