Add View Cube to the screen

[itspvty]

Added the View Cube element to the top right of the screen. The cube is clickable on its faces, edges, and corners, and will automatically reorient the camera to match the proposed perspective of the clicked element. An option is present in settings to enable or disable the cube entirely.

[itspvty]

Could you change the colors of the view cube to better resemble the fusion view cube?

Also, if possible, can you add the functionality to make the view cube dragable, meaning you can orbit by clicking and dragging on the view cube?

This looks really good. Is there any way I can request that the view cube can also be draggable?

I'm so cooked but yeah I'll try

[azaleacolburn]

Could the view cube axises extend all the way to the corner?

Before: After:

Here's the diff you'll need to apply.

diff --git a/fission/src/ui/components/ViewCube.tsx b/fission/src/ui/components/ViewCube.tsx
index 22e0f1460..840fa6d7c 100644
--- a/fission/src/ui/components/ViewCube.tsx
+++ b/fission/src/ui/components/ViewCube.tsx
@@ -443,7 +443,7 @@ const ViewCube: React.FC<ViewCubeProps> = ({
             ) => {
                 const group = new THREE.Group()
 
-                const lineLength = 0.6
+                const lineLength = 2.5
                 const lineRadius = 0.025
 
                 const lineGeometry = new THREE.CylinderGeometry(lineRadius, lineRadius, lineLength)
@@ -488,16 +488,12 @@ const ViewCube: React.FC<ViewCubeProps> = ({
             const xAxis = createAxisLine(
                 0xff0000,
                 new THREE.Vector3(-1, 0, 0),
-                new THREE.Vector3(-1.3, -0.98, -0.98),
+                new THREE.Vector3(-.25, -0.98, -0.98),
                 "X"
             )
-            axisGroup.add(xAxis)
-
-            const yAxis = createAxisLine(0x00ff00, new THREE.Vector3(0, 1, 0), new THREE.Vector3(0.98, 1.3, -0.98), "Y")
-            axisGroup.add(yAxis)
-
-            const zAxis = createAxisLine(0x0000ff, new THREE.Vector3(0, 0, 1), new THREE.Vector3(0.98, -0.98, 1.3), "Z")
-            axisGroup.add(zAxis)
+            const yAxis = createAxisLine(0x00ff00, new THREE.Vector3(0, 1, 0), new THREE.Vector3(0.98, .25, -0.98), "Y")
+            const zAxis = createAxisLine(0x0000ff, new THREE.Vector3(0, 0, 1), new THREE.Vector3(0.98, -0.98, .25), "Z")
+            axisGroup.add(xAxis, yAxis, zAxis)
 
             return axisGroup
         }
@@ -734,7 +730,7 @@ const ViewCube: React.FC<ViewCubeProps> = ({
                 currentTarget: containerRef.current.children[0],
                 clientX: currentMousePos.x,
                 clientY: currentMousePos.y,
-                preventDefault: () => {},
+                preventDefault: () => { },
             } as React.MouseEvent
 
             const element = getClickedElement(mockEvent)

[itspvty]

Could the view cube axises extend all the way to the corner?

Before: After:

Here's the diff you'll need to apply.

diff --git a/fission/src/ui/components/ViewCube.tsx b/fission/src/ui/components/ViewCube.tsx
index 22e0f1460..840fa6d7c 100644
--- a/fission/src/ui/components/ViewCube.tsx
+++ b/fission/src/ui/components/ViewCube.tsx
@@ -443,7 +443,7 @@ const ViewCube: React.FC<ViewCubeProps> = ({
             ) => {
                 const group = new THREE.Group()
 
-                const lineLength = 0.6
+                const lineLength = 2.5
                 const lineRadius = 0.025
 
                 const lineGeometry = new THREE.CylinderGeometry(lineRadius, lineRadius, lineLength)
@@ -488,16 +488,12 @@ const ViewCube: React.FC<ViewCubeProps> = ({
             const xAxis = createAxisLine(
                 0xff0000,
                 new THREE.Vector3(-1, 0, 0),
-                new THREE.Vector3(-1.3, -0.98, -0.98),
+                new THREE.Vector3(-.25, -0.98, -0.98),
                 "X"
             )
-            axisGroup.add(xAxis)
-
-            const yAxis = createAxisLine(0x00ff00, new THREE.Vector3(0, 1, 0), new THREE.Vector3(0.98, 1.3, -0.98), "Y")
-            axisGroup.add(yAxis)
-
-            const zAxis = createAxisLine(0x0000ff, new THREE.Vector3(0, 0, 1), new THREE.Vector3(0.98, -0.98, 1.3), "Z")
-            axisGroup.add(zAxis)
+            const yAxis = createAxisLine(0x00ff00, new THREE.Vector3(0, 1, 0), new THREE.Vector3(0.98, .25, -0.98), "Y")
+            const zAxis = createAxisLine(0x0000ff, new THREE.Vector3(0, 0, 1), new THREE.Vector3(0.98, -0.98, .25), "Z")
+            axisGroup.add(xAxis, yAxis, zAxis)
 
             return axisGroup
         }
@@ -734,7 +730,7 @@ const ViewCube: React.FC<ViewCubeProps> = ({
                 currentTarget: containerRef.current.children[0],
                 clientX: currentMousePos.x,
                 clientY: currentMousePos.y,
-                preventDefault: () => {},
+                preventDefault: () => { },
             } as React.MouseEvent
 
             const element = getClickedElement(mockEvent)

Hmm I disagree with this change; I don't think it actually looks better, and the way we currently have it matches the style that Fusion uses. LMK if you really want me to change this.

[azaleacolburn]

Hmm I disagree with this change; I don't think it actually looks better, and the way we currently have it matches the style that Fusion uses. LMK if you really want me to change this.

It's probably a setting or something in Fusion, because this is what it looks like in Fusion for me.

[itspvty]

Hmm I disagree with this change; I don't think it actually looks better, and the way we currently have it matches the style that Fusion uses. LMK if you really want me to change this.

It's probably a setting or something in Fusion, because this is what it looks like in Fusion for me.

Got it, I will do it how it is shown in your screenshot.