From 1e8b18d5b32634e079fc133365ae4665cbd4ffa4 Mon Sep 17 00:00:00 2001
From: JCNoguera <88061365+VmMad@users.noreply.github.com>
Date: Thu, 22 Feb 2024 18:04:54 +0100
Subject: [PATCH] feat: make scene vertical in vertical screens (#1161)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: allow vertical scenes of small screens

* feat: top-to-bottom instead of bottom-to-top

---------

Co-authored-by: Begoña Álvarez de la Cruz <balvarez@boxfish.studio>
---
 .../visualizer-threejs/CameraControls.tsx     | 19 +++++++++++++++++--
 1 file changed, 17 insertions(+), 2 deletions(-)

diff --git a/client/src/features/visualizer-threejs/CameraControls.tsx b/client/src/features/visualizer-threejs/CameraControls.tsx
index 18c36e95e..c6f422394 100644
--- a/client/src/features/visualizer-threejs/CameraControls.tsx
+++ b/client/src/features/visualizer-threejs/CameraControls.tsx
@@ -1,9 +1,10 @@
 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 { useConfigStore } from "./store";
 import { VISUALIZER_PADDINGS } from "./constants";
+import { getCameraAngles } from "./utils";
 
 const CAMERA_ANGLES = getCameraAngles();
 
@@ -12,6 +13,7 @@ const CameraControls = () => {
 
     const scene = useThree((state) => state.scene);
     const mesh = scene.getObjectByName(CanvasElement.TangleWrapperMesh) as THREE.Mesh | undefined;
+    const canvasDimensions = useConfigStore((state) => state.dimensions);
 
     /**
      * Locks the camera zoom to the current zoom value.
@@ -37,11 +39,24 @@ const CameraControls = () => {
         if (controls && mesh) {
             unlockCameraZoom(controls);
             controls.fitToBox(mesh, false, { ...VISUALIZER_PADDINGS });
-            controls.setOrbitPoint(0, 0, 0);
             lockCameraZoom(controls);
         }
     }
 
+    /**
+     * Sets the scene to be vertical or horizontal
+     * depending on the canvas dimensions.
+     */
+    useEffect(() => {
+        const cameraControls = controls.current;
+        if (cameraControls && canvasDimensions.width && canvasDimensions.height) {
+            const camera = controls.current?.camera;
+            const renderVerticalScene = canvasDimensions.width < canvasDimensions.height;
+            const cameraUp: [number, number, number] = renderVerticalScene ? [1, 0, 0] : [0, 1, 0];
+            camera.up.set(...cameraUp);
+        }
+    }, [canvasDimensions, controls, mesh]);
+
     /**
      * Fit camera to TangleMesh on mount and on window resize.
      */