Tracking Rotation with PresentationControls in React Three Fiber

Based on the information available, PresentationControls doesn't have a direct onChange event like OrbitControls does. However, there are a few approaches you can use to track the rotation of your model when using PresentationControls.

Approach 1: Use a Reference to the Group

PresentationControls applies transformations to a group that wraps your content. You can use a ref to access this group and monitor its rotation:

JSXCopied
import { useRef, useEffect } from 'react'
import { useFrame } from '@react-three/fiber'

function Scene() {
  const groupRef = useRef()
  const [rotation, setRotation] = useState({ x: 0, y: 0, z: 0 })
  
  useFrame(() => {
    if (groupRef.current) {
      // Check if rotation has changed significantly
      if (Math.abs(groupRef.current.rotation.x - rotation.x) > 0.01 ||
          Math.abs(groupRef.current.rotation.y - rotation.y) > 0.01 ||
          Math.abs(groupRef.current.rotation.z - rotation.z) > 0.01) {
        
        setRotation({
          x: groupRef.current.rotation.x,
          y: groupRef.current.rotation.y,
          z: groupRef.current.rotation.z
        })
      }
    }
  })
  
  return (
    <Canvas>
      <PresentationControls
        polar={[-Math.PI / 2, Math.PI / 2]}
        azimuth={[-Infinity, Infinity]}
      >
        <group ref={groupRef}>
          <Stage preset={"portrait"} intensity={1} shadows={false} adjustCamera={1.2} environment={"forest"}>
            <SomeModel />
          </Stage>
        </group>
      </PresentationControls>
    </Canvas>
  )
}

Approach 2: Create a Custom Wrapper Component

You can create a wrapper component that monitors the rotation of your model:

JSXCopied
function RotationTracker({ children, onRotationChange }) {
  const ref = useRef()
  
  useFrame(() => {
    if (ref.current) {
      onRotationChange({
        x: ref.current.rotation.x,
        y: ref.current.rotation.y,
        z: ref.current.rotation.z
      })
    }
  })
  
  return <group ref={ref}>{children}</group>
}

// Then in your main component:
function Scene() {
  const [rotation, setRotation] = useState({ x: 0, y: 0, z: 0 })
  
  return (
    <Canvas>
      <PresentationControls
        polar={[-Math.PI / 2, Math.PI / 2]}
        azimuth={[-Infinity, Infinity]}
      >
        <RotationTracker onRotationChange={setRotation}>
          <Stage preset={"portrait"} intensity={1} shadows={false} adjustCamera={1.2} environment={"forest"}>
            <SomeModel />
          </Stage>
        </RotationTracker>
      </PresentationControls>
    </Canvas>
  )
}

Approach 3: Access PresentationControls Internal State

If you need more direct access to the internal state of PresentationControls, you might need to look at the source code of the component to understand how it manages rotation. The drei library is open source, so you can examine how PresentationControls works and potentially extend it with your own version that includes an onChange callback.

Note that unlike OrbitControls which rotates the camera, PresentationControls typically rotates the object (or more precisely, the group containing your objects), which is why you need to track the rotation of the group rather than the camera.

Remember to convert the rotation values from radians to degrees if needed, using your eulerToDegree function.