Help with moving floating character in cannon world with React Three Fiber

Questions
,
1

I’m very new to Three.js and Cannon.js so I will be very grateful if you guy could show me how to do this.
I’m using useBox hook to my group of glb model
const [ref, api] = useBox(()=>({ mass: 1, position: [0, 2, 0] }));
<group ref={ref} {…props} dispose={null}>
…
</group>

and using this code to move my Companion:

move
move1640×1156 155 KB

But the character’s not floating but slowly falling to the plane, its face’s not heading toward the direction it’s moving. Then when it reached the ground and moved, it has the behavior of a Sphere (or Box i don’t really know) and just spin like a ball

Wrong
Wrong1147×464 33.6 KB

Can i do this floating character in cannon.js (like wrap model around a Box or something), and how to make my character move more naturally?

2

i would suggest you do not use cannon any longer. use react-three/rapier. you don’t have to approximate shapes with this, it detects shapes automatically from the meshes, you just wrap them into <RigidBody> and that’s it.

here’s an example with a floating body: Rapier physics - CodeSandbox

this is how it works:

  const ref = useRef()
  useFrame((state, delta) => {
    // ...
    ref.current.setNextKinematicTranslation({ x, y, z })
    ref.current.setNextKinematicRotation({ x, y, z })
  })
  return (
    <RigidBody ref={ref} type="kinematicPosition" colliders="hull">
      <mesh geometry={yourGeometry} />

there is also a ready-made keyboard controller in drei: GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

1 Like