feat: allow vertical scenes of small screens

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]);