From 96b5f34c1af3e43a63dca8eb4c46bd8984cf9dd4 Mon Sep 17 00:00:00 2001
From: Clemens Solar <git@clemens.solar>
Date: Sat, 6 Jan 2024 21:17:34 +0100
Subject: [PATCH] fix: GizmoViewcube

see https://github.com/pmndrs/drei/issues/1399
---
 src/components/threeJs/Canvas.tsx | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/components/threeJs/Canvas.tsx b/src/components/threeJs/Canvas.tsx
index 2a3a9c9..96c678e 100644
--- a/src/components/threeJs/Canvas.tsx
+++ b/src/components/threeJs/Canvas.tsx
@@ -6,6 +6,7 @@ import {
 } from '@react-three/drei';
 import { Canvas } from '@react-three/fiber';
 import React from 'react';
+import * as THREE from 'three';
 
 import { Environment } from './Environment';
 import Model from './Model';
@@ -80,6 +81,14 @@ export default function ThreeJsCanvas({
     }
   };
 
+  const tweenCamera = (position: THREE.Vector3) => {
+    const point = new THREE.Spherical().setFromVector3(
+      new THREE.Vector3(position.x, position.y, position.z)
+    );
+    cameraControlRef.current!.rotateTo(point.theta, point.phi, true);
+    cameraControlRef.current!.fitToSphere(geometry, true);
+  };
+
   return (
     <Canvas
       id="editor-canvas"
@@ -110,7 +119,21 @@ export default function ThreeJsCanvas({
         onPointerMove={handlePointerMove}
       />
       <GizmoHelper alignment="bottom-right" margin={[80, 80]}>
-        <GizmoViewcube />
+        <GizmoViewcube
+          onClick={(e) => {
+            e.stopPropagation();
+            if (
+              e.eventObject.position.x === 0 &&
+              e.eventObject.position.y === 0 &&
+              e.eventObject.position.z === 0
+            ) {
+              tweenCamera(e.face!.normal);
+            } else {
+              tweenCamera(e.eventObject.position);
+            }
+            return null;
+          }}
+        />
       </GizmoHelper>
     </Canvas>
   );