fix(Canvas): don't override camera frustum props (#3244)

packages/fiber/src/core/index.tsx

@@ -226,7 +226,21 @@ function createRoot<TCanvas extends Canvas>(canvas: TCanvas): ReconcilerRoot<TCa
           : new THREE.PerspectiveCamera(75, 0, 0.1, 1000)
         if (!isCamera) {
           camera.position.z = 5
-          if (cameraOptions) applyProps(camera as any, cameraOptions as any)
+          if (cameraOptions) {
+            applyProps(camera as any, cameraOptions as any)
+            // Preserve user-defined frustum if possible
+            // https://github.com/pmndrs/react-three-fiber/issues/3160
+            if (
+              'aspect' in cameraOptions ||
+              'left' in cameraOptions ||
+              'right' in cameraOptions ||
+              'bottom' in cameraOptions ||
+              'top' in cameraOptions
+            ) {
+              ;(camera as any).manual = true
+              camera.updateProjectionMatrix()
+            }
+          }
           // Always look at center by default
           if (!state.camera && !cameraOptions?.rotation) camera.lookAt(0, 0, 0)
         }

packages/fiber/tests/core/renderer.test.tsx

@@ -1047,4 +1047,19 @@ describe('renderer', () => {
     expect(meshDispose).toBeCalledTimes(1)
     expect(primitiveDispose).not.toBeCalled()
   })
+
+  it('preserves camera frustum props for perspective', async () => {
+    const store = await act(async () => root.configure({ camera: { aspect: 0 } }).render(null))
+    expect(store.getState().camera.aspect).toBe(0)
+  })
+
+  it('preserves camera frustum props for orthographic', async () => {
+    const store = await act(async () =>
+      root.configure({ orthographic: true, camera: { left: 0, right: 0, top: 0, bottom: 0 } }).render(null),
+    )
+    expect(store.getState().camera.left).toBe(0)
+    expect(store.getState().camera.right).toBe(0)
+    expect(store.getState().camera.top).toBe(0)
+    expect(store.getState().camera.bottom).toBe(0)
+  })
 })