From 332c3fe55c3f515ccfb4f4eb5b53aac67067cd05 Mon Sep 17 00:00:00 2001 From: kpal81xd Date: Fri, 12 Apr 2024 11:57:10 +0100 Subject: [PATCH 1/4] added colorAlpha property for gizmos --- .../src/examples/misc/gizmos/controls.mjs | 11 ++++ examples/src/examples/misc/gizmos/example.mjs | 1 + extras/gizmo/transform-gizmo.js | 53 +++++++++++++------ 3 files changed, 49 insertions(+), 16 deletions(-) diff --git a/examples/src/examples/misc/gizmos/controls.mjs b/examples/src/examples/misc/gizmos/controls.mjs index dd06c73565f..d0e8a0712a9 100644 --- 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 index 036e5206e11..6ad26641374 100644 --- 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 index 6c7f284c352..c0d513c05ea 100644 --- 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. * @@ -138,6 +128,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 +144,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,9 +428,32 @@ 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._updateAxisColor('x', this._meshColors.axis.x); + this._updateAxisColor('y', this._meshColors.axis.y); + this._updateAxisColor('z', this._meshColors.axis.z); + } + + 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.axis[axis].copy(this._colorSemi(value)); this._meshColors.hover[axis].copy(value); for (const name in this._shapes) { From 5395d0e76abe3bb7c6c0a280ae8625ac616d6063 Mon Sep 17 00:00:00 2001 From: kpal81xd Date: Fri, 12 Apr 2024 12:02:21 +0100 Subject: [PATCH 2/4] fixed resetting all colors --- extras/gizmo/transform-gizmo.js | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index c0d513c05ea..121cced605a 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -86,6 +86,17 @@ export const SHAPEAXIS_XYZ = 'xyz'; */ export const SHAPEAXIS_FACE = 'face'; + +/** + * Converts Color4 to Color3. + * + * @param {Color} color - Color4 + * @returns Color3 + */ +function color3from4(color) { + return new Color(color.r, color.g, color.b); +} + /** * The base class for all transform gizmos. * @@ -436,9 +447,9 @@ class TransformGizmo extends Gizmo { set colorAlpha(value) { this._colorAlpha = math.clamp(value, 0, 1); - this._updateAxisColor('x', this._meshColors.axis.x); - this._updateAxisColor('y', this._meshColors.axis.y); - this._updateAxisColor('z', this._meshColors.axis.z); + this._updateAxisColor('x', color3from4(this._meshColors.axis.x)); + this._updateAxisColor('y', color3from4(this._meshColors.axis.y)); + this._updateAxisColor('z', color3from4(this._meshColors.axis.z)); } get colorAlpha() { From 6680e047a9daee9bca5489d76ed16ead6d7fcf3f Mon Sep 17 00:00:00 2001 From: kpal81xd Date: Fri, 12 Apr 2024 12:04:44 +0100 Subject: [PATCH 3/4] cleaned up color3 color4 creation; --- extras/gizmo/transform-gizmo.js | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index 121cced605a..45b6f79a30b 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -91,7 +91,7 @@ export const SHAPEAXIS_FACE = 'face'; * Converts Color4 to Color3. * * @param {Color} color - Color4 - * @returns Color3 + * @returns {Color} - Color3 */ function color3from4(color) { return new Color(color.r, color.g, color.b); @@ -447,9 +447,9 @@ class TransformGizmo extends Gizmo { set colorAlpha(value) { this._colorAlpha = math.clamp(value, 0, 1); - this._updateAxisColor('x', color3from4(this._meshColors.axis.x)); - this._updateAxisColor('y', color3from4(this._meshColors.axis.y)); - this._updateAxisColor('z', color3from4(this._meshColors.axis.z)); + this._updateAxisColor('x', this._meshColors.axis.x); + this._updateAxisColor('y', this._meshColors.axis.y); + this._updateAxisColor('z', this._meshColors.axis.z); } get colorAlpha() { @@ -463,9 +463,12 @@ class TransformGizmo extends Gizmo { } _updateAxisColor(axis, value) { - this._guideColors[axis].copy(value); - this._meshColors.axis[axis].copy(this._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); From 367fb25fa87356f66ba426d2b6b1662c3fc80029 Mon Sep 17 00:00:00 2001 From: kpal81xd Date: Fri, 12 Apr 2024 12:16:36 +0100 Subject: [PATCH 4/4] set all colors explicitly instead of using updateAxisColor --- extras/gizmo/transform-gizmo.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/extras/gizmo/transform-gizmo.js b/extras/gizmo/transform-gizmo.js index 45b6f79a30b..2a965cdac19 100644 --- a/extras/gizmo/transform-gizmo.js +++ b/extras/gizmo/transform-gizmo.js @@ -447,9 +447,11 @@ class TransformGizmo extends Gizmo { set colorAlpha(value) { this._colorAlpha = math.clamp(value, 0, 1); - this._updateAxisColor('x', this._meshColors.axis.x); - this._updateAxisColor('y', this._meshColors.axis.y); - this._updateAxisColor('z', this._meshColors.axis.z); + 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() {