CameraTransition R3F: Add onBeforeToggle event

src/r3f/components/CameraTransition.jsx

@@ -1,11 +1,17 @@
 import { forwardRef, useEffect, useMemo } from 'react';
 import { useFrame, useThree } from '@react-three/fiber';
 import { CameraTransitionManager } from '3d-tiles-renderer';
-import { useDeepOptions } from '../utilities/useOptions';
+import { useDeepOptions } from '../utilities/useOptions.jsx';
 
 export const CameraTransition = forwardRef( function CameraTransition( props, ref ) {
 
-	const { mode = 'perspective', perspectiveCamera, orthographicCamera, ...options } = props;
+	const {
+		mode = 'perspective',
+		onBeforeToggle,
+		perspectiveCamera,
+		orthographicCamera,
+		...options
+	} = props;
 	const [ set, get, invalidate, controls, camera, size ] = useThree( state => [ state.set, state.get, state.invalidate, state.controls, state.camera, state.size ] );
 
 	// create the manager
@@ -32,7 +38,7 @@
 
 		// only respect the camera initially so the default camera settings are automatically used
 
 	}, [] );
 
 	useEffect( () => {
 
@@ -109,10 +115,20 @@
 
 		if ( mode !== manager.mode ) {
 
+			// calculate the camera being toggled to. Because "toggle" has not yet been
+			// called this will select the camera that is being transitioned to.
+			const targetCamera = mode === 'orthographic' ? manager.perspectiveCamera : manager.orthographicCamera;
 			if ( controls && controls.isEnvironmentControls ) {
 
 				controls.getPivotPoint( manager.fixedPoint );
 				manager.syncCameras();
+
+				if ( onBeforeToggle ) {
+
+					onBeforeToggle( manager, targetCamera );
+
+				}
+
 				controls.adjustCamera( manager.perspectiveCamera );
 				controls.adjustCamera( manager.orthographicCamera );
 
@@ -125,6 +141,12 @@
 					.add( manager.camera.position );
 				manager.syncCameras();
 
+				if ( onBeforeToggle ) {
+
+					onBeforeToggle( manager, targetCamera );
+
+				}
+
 			}
 
 			manager.toggle();
@@ -132,7 +154,7 @@
 
 		}
 
 	}, [ mode, manager, invalidate, controls ] );
 
 	// rerender the frame when the transition animates
 	useEffect( () => {