Add camera controls transition event listeners

[sinedie]

Why

Camera controls won't work with ondemand frame loop

What

Added the event listeners on camera controls docs for transitions to work on demand frame loop

Checklist

• Documentation updated (No need to change any documentation)
• Storybook entry added (camera controls doesn't have storybook)
• Ready to be merged

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
drei	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2023 7:04pm

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 413bb74:

Sandbox	Source
epic-river-gumrws	Configuration
Ground reflections and video textures	Configuration
arc-x-pmndrs-colors	Configuration

[sinedie]

Workaround for someone who need it, but PR doesn't get merged

import { useRef } from 'react';
import { Canvas, useThree } from '@react-three/fiber';
import { CameraControls, CameraControlsProps } from '@react-three/drei';
import CameraControlsImpl from 'camera-controls';

const Controls = forwardRef<CameraControlsImpl, CameraControlsProps>(
  (props, ref) => {
    const { invalidate, controls } = useThree();

    const callback = () => {
      invalidate();
    };

    useEffect(() => {
      if (!controls) return;

      controls.addEventListener('control', callback);
      controls.addEventListener('transitionstart', callback);
      controls.addEventListener('wake', callback);

      return () => {
        controls.removeEventListener('control', callback);
        controls.removeEventListener('transitionstart', callback);
        controls.removeEventListener('wake', callback);
      };
    }, [controls]);

    return <CameraControls ref={ref} {...props} />;
  }
);

function Main() {
    const cameraControlsRef = useRef<CameraControls | null>(null);

    return (
        <Canvas frameloop="demand">
            <Controls ref={cameraControlsRef} makeDefault />
             <mesh>
                <boxGeometry />
                <meshStandardMaterial />
              </mesh>

        </Canvas>
    )

[github-actions]

🎉 This PR is included in version 9.65.3 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀