Need help rotating objects in react-three-fiber

Hello, I am using react-three-fiber and react-use-gesture. I am trying to rotate this object using the useDrag hook. After the turning the wheel it spins around weird. Here is the code:

  const bind = useDrag(
    ({ offset: [x, y], last }) => {
      const deltaAngle = Math.atan2(y, x)
      if (last) {
        // SNAP ANGLE?
        //   Math.round(((bridgeRef.current.rotation.z * 180) / Math.PI) * 90) / 90
      } else {
        bridgeRef.current ? (bridgeRef.current.rotation.z = deltaAngle) : null
    { pointerEvents: true }

  {/* Bridge */}
        <group position={[3, 7, -7]} ref={bridgeRef}>
            rotation={[Math.PI / 2, 0, 0]}
            position={[0, 0, -1]}

it looks like you are just overwriting rotation-z but you need to remember the last or current position. maybe the angle should be additive instead of just setting it.

I’m sorry but I am total beginner to 3D is there any examples or documentation regarding this implementation?

Hello, could you provide any examples or documentation that would help me. I’ve been watching/trying from unity tutorials and codes to rotate this but my bridge just spins out of the world. Any help would be appreciated.

it’s not entirely clear to me what you want to know. in threejs the rotation isn’t additive. it is 0,0,0 by default, so when you set it to Math.PI/2,0,0 then x is Math.PI/2, but if you now set it to Math.PI/4,0,0, then it won’t add that to the previous, x will just be Math.PI/4.

in your code you just do: rotation.z = deltaAngle so it works one time. but once you have set the rotation and you rotate it again, it just sets the angle again, without taking the previous z into account, it basically starts from scratch. you need to find a way to add the angle. this could be rotation.z =+ deltaAngle but i don’t know math, if you know what atan2(x, y) does you probably know more than i do already. :grin:

Thanks for information. I think I’ll try it out with some pseudocode I found online.