From 85fabe46fc885330f8c24e4250d43a420f8fb9a8 Mon Sep 17 00:00:00 2001
From: Garrett Johnson <garrett.kjohnson@gmail.com>
Date: Sat, 21 Dec 2024 15:00:03 +0900
Subject: [PATCH] Fix #889

---
 src/r3f/components/CameraTransition.jsx | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/r3f/components/CameraTransition.jsx b/src/r3f/components/CameraTransition.jsx
index 241935103..b20b4ea75 100644
--- a/src/r3f/components/CameraTransition.jsx
+++ b/src/r3f/components/CameraTransition.jsx
@@ -6,7 +6,7 @@ import { useDeepOptions } from '../utilities/useOptions';
 export const CameraTransition = forwardRef( function CameraTransition( props, ref ) {
 
 	const { mode = 'perspective', perspectiveCamera, orthographicCamera, ...options } = props;
-	const [ set, invalidate, controls, camera, size ] = useThree( state => [ state.set, state.invalidate, state.controls, state.camera, state.size ] );
+	const [ set, get, invalidate, controls, camera, size ] = useThree( state => [ state.set, state.get, state.invalidate, state.controls, state.camera, state.size ] );
 
 	// create the manager
 	const manager = useMemo( () => {
@@ -164,6 +164,25 @@ export const CameraTransition = forwardRef( function CameraTransition( props, re
 
 		}
 
+		// ensure the orthographic camera size is resized correctly if the user is not
+		// providing their own camera.
+		const { camera, size } = get();
+		if ( ! orthographicCamera && camera === manager.orthographicCamera ) {
+
+			const aspect = size.width / size.height;
+			const camera = manager.orthographicCamera;
+			if ( aspect !== camera.right ) {
+
+				camera.bottom = - 1;
+				camera.top = 1;
+				camera.left = - aspect;
+				camera.right = aspect;
+				camera.updateProjectionMatrix();
+
+			}
+
+		}
+
 		if ( manager.animating ) {
 
 			invalidate();