Exposed gizmo color alpha (#6249)

* added colorAlpha property for gizmos * fixed resetting all colors * cleaned up color3 color4 creation; * set all colors explicitly instead of using updateAxisColor
playcanvas · Apr 15, 2024 · 3985cdc · 3985cdc
1 parent 370a24a
commit 3985cdc
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 18 deletions.
diff --git a/examples/src/examples/misc/gizmos/controls.mjs b/examples/src/examples/misc/gizmos/controls.mjs
@@ -95,6 +95,17 @@ export function controls({ observer, ReactPCUI, React, jsx, fragment }) {
                     binding: new BindingTwoWay(),
                     link: { observer, path: 'gizmo.zAxisColor' }
                 })
+            ),
+            jsx(
+                LabelGroup,
+                { text: 'Color Alpha' },
+                jsx(SliderInput, {
+                    binding: new BindingTwoWay(),
+                    link: { observer, path: 'gizmo.colorAlpha' },
+                    min: 0,
+                    max: 1,
+                    precision: 2
+                })
             )
         ),
         jsx(

diff --git a/examples/src/examples/misc/gizmos/example.mjs b/examples/src/examples/misc/gizmos/example.mjs
@@ -101,6 +101,7 @@ class GizmoHandler {
             xAxisColor: Object.values(gizmo.xAxisColor),
             yAxisColor: Object.values(gizmo.yAxisColor),
             zAxisColor: Object.values(gizmo.zAxisColor),
+            colorAlpha: gizmo.colorAlpha,
             coordSpace: gizmo.coordSpace,
             axisLineTolerance: gizmo.axisLineTolerance,
             axisCenterTolerance: gizmo.axisCenterTolerance,

diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js
@@ -30,16 +30,6 @@ const FACING_EPSILON = 0.2;
 const SPANLINE_SIZE = 1e3;
 const ROTATE_SCALE = 900;
 
-/**
- * @param {Color} color - The color.
- * @returns {Color} - The semi transparent color.
- */
-const colorSemi = (color) => {
-    const clone = color.clone();
-    clone.a = 0.6;
-    return clone;
-};
-
 /**
  * Shape axis for the line X.
  *
@@ -96,6 +86,17 @@ export const SHAPEAXIS_XYZ = 'xyz';
  */
 export const SHAPEAXIS_FACE = 'face';
 
+
+/**
+ * Converts Color4 to Color3.
+ *
+ * @param {Color} color - Color4
+ * @returns {Color} - Color3
+ */
+function color3from4(color) {
+    return new Color(color.r, color.g, color.b);
+}
+
 /**
  * The base class for all transform gizmos.
  *
@@ -138,6 +139,14 @@ class TransformGizmo extends Gizmo {
      */
     static EVENT_TRANSFORMEND = 'transform:end';
 
+    /**
+     * Internal color alpha value.
+     *
+     * @type {number}
+     * @private
+     */
+    _colorAlpha = 0.6;
+
     /**
      * Internal color for meshs.
      *
@@ -146,11 +155,11 @@ class TransformGizmo extends Gizmo {
      */
     _meshColors = {
         axis: {
-            x: colorSemi(COLOR_RED),
-            y: colorSemi(COLOR_GREEN),
-            z: colorSemi(COLOR_BLUE),
-            xyz: colorSemi(Color.WHITE),
-            face: colorSemi(Color.WHITE)
+            x: this._colorSemi(COLOR_RED),
+            y: this._colorSemi(COLOR_GREEN),
+            z: this._colorSemi(COLOR_BLUE),
+            xyz: this._colorSemi(Color.WHITE),
+            face: this._colorSemi(Color.WHITE)
         },
         hover: {
             x: COLOR_RED.clone(),
@@ -430,10 +439,38 @@ class TransformGizmo extends Gizmo {
         return this._meshColors.axis.z;
     }
 
+    /**
+     * The color alpha for all axes.
+     *
+     * @type {number}
+     */
+    set colorAlpha(value) {
+        this._colorAlpha = math.clamp(value, 0, 1);
+
+        this._meshColors.axis.x.copy(this._colorSemi(this._meshColors.axis.x));
+        this._meshColors.axis.y.copy(this._colorSemi(this._meshColors.axis.y));
+        this._meshColors.axis.z.copy(this._colorSemi(this._meshColors.axis.z));
+        this._meshColors.axis.xyz.copy(this._colorSemi(this._meshColors.axis.xyz));
+        this._meshColors.axis.face.copy(this._colorSemi(this._meshColors.axis.face));
+    }
+
+    get colorAlpha() {
+        return this._colorAlpha;
+    }
+
+    _colorSemi(color) {
+        const clone = color.clone();
+        clone.a = this._colorAlpha;
+        return clone;
+    }
+
     _updateAxisColor(axis, value) {
-        this._guideColors[axis].copy(value);
-        this._meshColors.axis[axis].copy(colorSemi(value));
-        this._meshColors.hover[axis].copy(value);
+        const color3 = color3from4(value);
+        const color4 = this._colorSemi(value);
+
+        this._guideColors[axis].copy(color3);
+        this._meshColors.axis[axis].copy(color4);
+        this._meshColors.hover[axis].copy(color3);
 
         for (const name in this._shapes) {
             this._shapes[name].hover(!!this._hoverAxis);