diff --git a/client/src/features/visualizer-threejs/CameraControls.tsx b/client/src/features/visualizer-threejs/CameraControls.tsx index 2419d39dc..b5b48cca0 100644 --- a/client/src/features/visualizer-threejs/CameraControls.tsx +++ b/client/src/features/visualizer-threejs/CameraControls.tsx @@ -1,9 +1,8 @@ import { CameraControls as DreiCameraControls } from "@react-three/drei"; -import { getCameraAngles } from "./utils"; import React, { useEffect } from "react"; import { useThree } from "@react-three/fiber"; import { CanvasElement } from "./enums"; -import { useTangleStore } from "./store"; +import { useTangleStore, useConfigStore } from "./store"; import { VISUALIZER_PADDINGS } from "./constants"; const CameraControls = () => { @@ -15,6 +14,8 @@ const CameraControls = () => { const zoom = useTangleStore((s) => s.zoom); const get = useThree((state) => state.get); const mesh = get().scene.getObjectByName(CanvasElement.TangleWrapperMesh); + const canvasDimensions = useConfigStore((state) => state.dimensions); + const camera = useThree((state) => state.camera); // Set fixed zoom useEffect(() => { @@ -24,11 +25,22 @@ const CameraControls = () => { } }, [controls, zoom, shouldLockZoom]); + /** + * Sets the scene to be vertical or horizontal + * depending on the canvas dimensions. + */ + useEffect(() => { + if (camera && canvasDimensions.width && canvasDimensions.height) { + const renderVerticalScene = canvasDimensions.width < canvasDimensions.height; + const cameraUp: [number, number, number] = renderVerticalScene ? [-1, 0, 0] : [0, 1, 0]; + camera.up.set(...cameraUp); + } + }, [canvasDimensions, camera]); + // Fix to TangleMesh useEffect(() => { if (controls.current && mesh) { controls.current.fitToBox(mesh, false, { ...VISUALIZER_PADDINGS }); - controls.current.setOrbitPoint(0, 0, 0); setShouldLockZoom(true); } }, [controls, mesh]);