Gizmo transform shape toggling

extras/gizmo/axis-shapes.js

@@ -85,10 +85,14 @@ class AxisShape {
 
     _layers = [];
 
+    _disabled;
+
     _defaultColor;
 
     _hoverColor;
 
+    _disabledColor;
+
     device;
 
     axis;
@@ -106,10 +110,26 @@ class AxisShape {
         this._rotation = options.rotation ?? new Vec3();
         this._scale = options.scale ?? new Vec3(1, 1, 1);
 
+        this._disabled = options.disabled ?? false;
+
         this._layers = options.layers ?? this._layers;
 
         this._defaultColor = options.defaultColor ?? Color.BLACK;
         this._hoverColor = options.hoverColor ?? Color.WHITE;
+        this._disabledColor = options.disabledColor ?? Color.GRAY_COLOR;
+    }
+
+    set disabled(value) {
+        this._disabled = value ?? false;
+        if (value) {
+            for (let i = 0; i < this.meshInstances.length; i++) {
+                this.meshInstances[i].material = this._disabledColor;
+            }
+        }
+    }
+
+    get disabled() {
+        return this._disabled;
     }
 
     _createRoot(name) {
@@ -126,7 +146,7 @@ class AxisShape {
     _addRenderMeshes(entity, meshes) {
         const meshInstances = [];
         for (let i = 0; i < meshes.length; i++) {
-            const mi = new MeshInstance(meshes[i], this._defaultColor);
+            const mi = new MeshInstance(meshes[i], this._disabled ? this._disabledColor : this._defaultColor);
             meshInstances.push(mi);
             this.meshInstances.push(mi);
         }
@@ -143,6 +163,9 @@ class AxisShape {
     }
 
     hover(state) {
+        if (this._disabled) {
+            return;
+        }
         const material = state ? this._hoverColor : this._defaultColor;
         for (let i = 0; i < this.meshInstances.length; i++) {
             this.meshInstances[i].material = material;

extras/gizmo/gizmo.js

@@ -165,7 +165,12 @@ class Gizmo extends EventHandler {
     _scale = 1;
 
     /**
-     * Internal version of coordinate space. Defaults to {@link WORLD_COORD_SPACE}.
+     * Internal version of coordinate space. Can be:
+     *
+     * {@link LOCAL_COORD_SPACE}
+     * {@link WORLD_COORD_SPACE}
+     *
+     * Defaults to {@link WORLD_COORD_SPACE}.
      *
      * @type {string}
      * @protected

extras/gizmo/rotate-gizmo.js

@@ -31,6 +31,7 @@ class RotateGizmo extends TransformGizmo {
             rotation: new Vec3(90, 0, 90),
             defaultColor: this._materials.axis.z.cullBack,
             hoverColor: this._materials.hover.z.cullBack,
+            disabledColor: this._materials.disabled.cullBack,
             sectorAngle: 180
         }),
         x: new AxisDisk(this._device, {
@@ -39,6 +40,7 @@ class RotateGizmo extends TransformGizmo {
             rotation: new Vec3(0, 0, -90),
             defaultColor: this._materials.axis.x.cullBack,
             hoverColor: this._materials.hover.x.cullBack,
+            disabledColor: this._materials.disabled.cullBack,
             sectorAngle: 180
         }),
         y: new AxisDisk(this._device, {
@@ -47,6 +49,7 @@ class RotateGizmo extends TransformGizmo {
             rotation: new Vec3(0, 0, 0),
             defaultColor: this._materials.axis.y.cullBack,
             hoverColor: this._materials.hover.y.cullBack,
+            disabledColor: this._materials.disabled.cullBack,
             sectorAngle: 180
         }),
         face: new AxisDisk(this._device, {
@@ -55,6 +58,7 @@ class RotateGizmo extends TransformGizmo {
             rotation: this._getLookAtEulerAngles(this._camera.entity.getPosition()),
             defaultColor: this._materials.axis.face,
             hoverColor: this._materials.hover.face,
+            disabledColor: this._materials.disabled.cullBack,
             ringRadius: 0.55
         })
     };

extras/gizmo/scale-gizmo.js

@@ -29,44 +29,50 @@ class ScaleGizmo extends TransformGizmo {
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, -90),
             defaultColor: this._materials.axis.x.cullNone,
-            hoverColor: this._materials.hover.x.cullNone
+            hoverColor: this._materials.hover.x.cullNone,
+            disabledColor: this._materials.disabled.cullNone
         }),
         xz: new AxisPlane(this._device, {
             axis: 'y',
             flipAxis: 'z',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, 0),
             defaultColor: this._materials.axis.y.cullNone,
-            hoverColor: this._materials.hover.y.cullNone
+            hoverColor: this._materials.hover.y.cullNone,
+            disabledColor: this._materials.disabled.cullNone
         }),
         xy: new AxisPlane(this._device, {
             axis: 'z',
             flipAxis: 'x',
             layers: [this._layer.id],
             rotation: new Vec3(90, 0, 0),
             defaultColor: this._materials.axis.z.cullNone,
-            hoverColor: this._materials.hover.z.cullNone
+            hoverColor: this._materials.hover.z.cullNone,
+            disabledColor: this._materials.disabled.cullNone
         }),
         x: new AxisBoxLine(this._device, {
             axis: 'x',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, -90),
             defaultColor: this._materials.axis.x.cullBack,
-            hoverColor: this._materials.hover.x.cullBack
+            hoverColor: this._materials.hover.x.cullBack,
+            disabledColor: this._materials.disabled.cullBack
         }),
         y: new AxisBoxLine(this._device, {
             axis: 'y',
             layers: [this._layer.id],
             rotation: new Vec3(0, 0, 0),
             defaultColor: this._materials.axis.y.cullBack,
-            hoverColor: this._materials.hover.y.cullBack
+            hoverColor: this._materials.hover.y.cullBack,
+            disabledColor: this._materials.disabled.cullBack
         }),
         z: new AxisBoxLine(this._device, {
             axis: 'z',
             layers: [this._layer.id],
             rotation: new Vec3(90, 0, 0),
             defaultColor: this._materials.axis.z.cullBack,
-            hoverColor: this._materials.hover.z.cullBack
+            hoverColor: this._materials.hover.z.cullBack,
+            disabledColor: this._materials.disabled.cullBack
         })
     };
 

extras/gizmo/transform-gizmo.js

@@ -34,6 +34,63 @@ const SEMI_BLUE_COLOR = new Color(0.3, 0.3, 1, 0.6);
 const YELLOW_COLOR = new Color(1, 1, 0.5);
 const WHITE_COLOR = new Color(1, 1, 1);
 const SEMI_WHITE_COLOR = new Color(1, 1, 1, 0.6);
+const GRAY_COLOR = new Color(0.5, 0.5, 0.5, 0.5);
+
+/**
+ * Shape axis for the line X.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_X = 'x';
+
+/**
+ * Shape axis for the line Y.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_Y = 'y';
+
+/**
+ * Shape axis for the line Z.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_Z = 'z';
+
+/**
+ * Shape axis for the plane YZ.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_YZ = 'yz';
+
+/**
+ * Shape axis for the plane XZ.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_XZ = 'xz';
+
+/**
+ * Shape axis for the plane XY.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_XY = 'xy';
+
+/**
+ * Shape axis for all directions XYZ.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_XYZ = 'xyz';
+
+/**
+ * Shape axis for facing the camera.
+ *
+ * @type {string}
+ */
+export const SHAPEAXIS_FACE = 'face';
 
 /**
  * The base class for all transform gizmos.
@@ -116,6 +173,10 @@ class TransformGizmo extends Gizmo {
             },
             face: this._createMaterial(YELLOW_COLOR),
             xyz: this._createMaterial(WHITE_COLOR)
+        },
+        disabled: {
+            cullBack: this._createMaterial(GRAY_COLOR),
+            cullNone: this._createMaterial(GRAY_COLOR, CULLFACE_NONE)
         }
     };
 
@@ -149,12 +210,12 @@ class TransformGizmo extends Gizmo {
     _shapes = {};
 
     /**
-     * Internal mapping of mesh instances to axis shapes for hovering.
+     * Internal mapping of mesh instances to axis shapes.
      *
      * @type {Map<import('playcanvas').MeshInstance, import('./axis-shapes.js').AxisShape>}
      * @private
      */
-    _hoverShapeMap = new Map();
+    _shapeMap = new Map();
 
     /**
      * Internal currently hovered shape.
@@ -263,36 +324,54 @@ class TransformGizmo extends Gizmo {
         });
 
         this.on('pointer:down', (x, y, meshInstance) => {
+            const shape = this._shapeMap.get(meshInstance);
+            if (shape?.disabled) {
+                return;
+            }
+
             if (this._dragging) {
                 return;
             }
 
-            if (meshInstance) {
-                this._selectedAxis = this._getAxis(meshInstance);
-                this._selectedIsPlane =  this._getIsPlane(meshInstance);
-                this._gizmoRotationStart.copy(this.root.getRotation());
-                const pointInfo = this._calcPoint(x, y);
-                this._selectionStartPoint.copy(pointInfo.point);
-                this._selectionStartAngle = pointInfo.angle;
-                this._dragging = true;
-                this.fire(TransformGizmo.EVENT_TRANSFORMSTART);
+            if (!meshInstance) {
+                return;
             }
+
+            this._selectedAxis = this._getAxis(meshInstance);
+            this._selectedIsPlane =  this._getIsPlane(meshInstance);
+            this._gizmoRotationStart.copy(this.root.getRotation());
+            const pointInfo = this._calcPoint(x, y);
+            this._selectionStartPoint.copy(pointInfo.point);
+            this._selectionStartAngle = pointInfo.angle;
+            this._dragging = true;
+            this.fire(TransformGizmo.EVENT_TRANSFORMSTART);
         });
 
         this.on('pointer:move', (x, y, meshInstance) => {
+            const shape = this._shapeMap.get(meshInstance);
+            if (shape?.disabled) {
+                return;
+            }
+
             this._hover(meshInstance);
 
-            if (this._dragging) {
-                const pointInfo = this._calcPoint(x, y);
-                pointDelta.copy(pointInfo.point).sub(this._selectionStartPoint);
-                const angleDelta = pointInfo.angle - this._selectionStartAngle;
-                this.fire(TransformGizmo.EVENT_TRANSFORMMOVE, pointDelta, angleDelta);
-                this._hoverAxis = '';
-                this._hoverIsPlane = false;
+            if (!this._dragging) {
+                return;
             }
+
+            const pointInfo = this._calcPoint(x, y);
+            pointDelta.copy(pointInfo.point).sub(this._selectionStartPoint);
+            const angleDelta = pointInfo.angle - this._selectionStartAngle;
+            this.fire(TransformGizmo.EVENT_TRANSFORMMOVE, pointDelta, angleDelta);
+
+            this._hoverAxis = '';
+            this._hoverIsPlane = false;
         });
 
         this.on('pointer:up', () => {
+            if (!this._dragging) {
+                return;
+            }
             this._dragging = false;
             this.fire(TransformGizmo.EVENT_TRANSFORMEND);
 
@@ -395,7 +474,7 @@ class TransformGizmo extends Gizmo {
         }
         this._hoverAxis = this._getAxis(meshInstance);
         this._hoverIsPlane = this._getIsPlane(meshInstance);
-        const shape = this._hoverShapeMap.get(meshInstance) || null;
+        const shape = this._shapeMap.get(meshInstance) || null;
         if (shape === this._hoverShape) {
             return;
         }
@@ -573,11 +652,33 @@ class TransformGizmo extends Gizmo {
                 meshInstances: shape.meshInstances
             });
             for (let i = 0; i < shape.meshInstances.length; i++) {
-                this._hoverShapeMap.set(shape.meshInstances[i], shape);
+                this._shapeMap.set(shape.meshInstances[i], shape);
             }
         }
     }
 
+    /**
+     * Toggles the shape to be enabled or disabled.
+     *
+     * @param {string} shapeAxis - the shape axis. Can be:
+     *
+     * {@link SHAPEAXIS_X}
+     * {@link SHAPEAXIS_Y}
+     * {@link SHAPEAXIS_Z}
+     * {@link SHAPEAXIS_YZ}
+     * {@link SHAPEAXIS_XZ}
+     * {@link SHAPEAXIS_XY}
+     * {@link SHAPEAXIS_XYZ}
+     * {@link SHAPEAXIS_FACE}
+     */
+    toggle(shapeAxis) {
+        if (!this._shapes.hasOwnProperty(shapeAxis)) {
+            return;
+        }
+
+        this._shapes[shapeAxis].disabled = !this._shapes[shapeAxis].disabled;
+    }
+
     /**
      * @override
      */