Need help rotating objects in react-three-fiber

Questions
,
1

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}>
          {RenderBridge()}
          <TurningWheel
            {...bind()}
            rotation={[Math.PI / 2, 0, 0]}
            position={[0, 0, -1]}
          />
        </group>
1 Like
2

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.

3

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

4

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.

5

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:

6

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

7

if it possible can you share it here ?