View Cube extra

examples/src/examples/misc/editor.controls.mjs

@@ -147,6 +147,74 @@ export const controls = ({ observer, ReactPCUI, React, jsx, fragment }) => {
                     link: { observer, path: 'grid.colorZ' }
                 })
             )
+        ),
+        jsx(
+            Panel,
+            { headerText: 'View Cube' },
+            jsx(
+                LabelGroup,
+                { text: 'Color X' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.colorX' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Y' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.colorY' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Z' },
+                jsx(ColorPicker, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.colorZ' }
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Radius' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.radius' },
+                    min: 10,
+                    max: 50
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Text Size' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.textSize' },
+                    min: 1,
+                    max: 50
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Line Thickness' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.lineThickness' },
+                    min: 1,
+                    max: 20
+                })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Line Length' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'viewCube.lineLength' },
+                    min: 10,
+                    max: 200
+                })
+            )
         )
     );
 };

examples/src/examples/misc/editor.example.mjs

@@ -182,6 +182,30 @@ setGizmoControls();
 gizmoHandler.add(box);
 window.focus();
 
+// view cube
+const viewCube = new pc.ViewCube(new pc.Vec4(0, 1, 1, 0));
+viewCube.dom.style.margin = '20px';
+data.set('viewCube', {
+    colorX: Object.values(viewCube.colorX),
+    colorY: Object.values(viewCube.colorY),
+    colorZ: Object.values(viewCube.colorZ),
+    radius: viewCube.radius,
+    textSize: viewCube.textSize,
+    lineThickness: viewCube.lineThickness,
+    lineLength: viewCube.lineLength
+});
+const tmpV1 = new pc.Vec3();
+viewCube.on(pc.ViewCube.EVENT_CAMERAALIGN, (/** @type {pc.Vec3} */ dir) => {
+    const cameraPos = camera.getPosition();
+    const focusPoint = cameraControls.focusPoint;
+    const cameraDist = focusPoint.distance(cameraPos);
+    const cameraStart = tmpV1.copy(dir).mulScalar(cameraDist).add(focusPoint);
+    cameraControls.refocus(focusPoint, cameraStart);
+});
+app.on('prerender', () => {
+    viewCube.update(camera.getWorldTransform());
+});
+
 // selector
 const layers = app.scene.layers;
 const selector = new Selector(app, camera.camera, [layers.getLayerByName('World')]);
@@ -288,6 +312,32 @@ data.on('*:set', (/** @type {string} */ path, /** @type {any} */ value) => {
             }
             break;
         }
+        case 'viewCube': {
+            switch (key) {
+                case 'colorX':
+                    viewCube.colorX = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'colorY':
+                    viewCube.colorY = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'colorZ':
+                    viewCube.colorZ = tmpC1.set(value[0], value[1], value[2]);
+                    break;
+                case 'radius':
+                    viewCube.radius = value;
+                    break;
+                case 'textSize':
+                    viewCube.textSize = value;
+                    break;
+                case 'lineThickness':
+                    viewCube.lineThickness = value;
+                    break;
+                case 'lineLength':
+                    viewCube.lineLength = value;
+                    break;
+            }
+            break;
+        }
 
     }
 });