Add View Cube to the screen

[ariesninjadev]

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.

[BrandonPacewic]

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

[Dhruv-0-Arora]

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?

[ariesninjadev]

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

[rutmanz]

👀🧊 lgtm

[PepperLola]

Could you make it scale based on the size of the screen? On my big monitor it's very small and hard to click, and it makes the click+drag movement really sensitive. Would it also be possible to make it not spin all the way back around when the angle wraps around?

Also, it looks like the highlight doesn't update unless you move your mouse even if you're hovering over another part of the cube.

Screen.Recording.2025-06-20.at.4.52.11.PM.mov

[Dhruv-0-Arora]

Overall, looks good. I have a few suggestions though

[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)

[ariesninjadev]

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.

[ariesninjadev]

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.

[azaleacolburn]

lgtm

[BrandonPacewic]

Getting a small issue where if I move my cursor away from the view cube quickly after clicking on a face some highlightable section will say highlighted even when my mouse is no longer pressed down.

Screen.Recording.2025-06-24.at.14.34.53.mov

[BrandonPacewic]

Looks good to me 🧊

I also believe that @Dhruv-0-Arora's and @PepperLola's requested changes have been made.

[PepperLola]

groovy

not waiting for ts 🥀