Gizmo Mesh Upgrade - PR Revisions

src/Gizmos/axisDragGizmo.ts

@@ -102,13 +102,12 @@ export class AxisDragGizmo extends Gizmo {
 
         // Build Mesh + Collider
         const arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, this._coloredMaterial, thickness);
-        const collider = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, this._coloredMaterial, thickness * 4, true);
+        const collider = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, this._coloredMaterial, thickness + 4, true);
 
         // Add to Root Node
         this._gizmoMesh = new Mesh("", gizmoLayer.utilityLayerScene);
-        [...arrow.getChildMeshes(), ...collider.getChildMeshes()].forEach((mesh) => {
-            this._gizmoMesh.addChild(mesh);
-        });
+        this._gizmoMesh.addChild((arrow as Mesh));
+        this._gizmoMesh.addChild((collider as Mesh));
 
         this._gizmoMesh.lookAt(this._rootMesh.position.add(dragAxis));
         this._gizmoMesh.scaling.scaleInPlace(1 / 3);
@@ -154,14 +153,27 @@ export class AxisDragGizmo extends Gizmo {
             }
         });
 
+        var light = gizmoLayer._getSharedGizmoLight();
+        light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
+
+        const cache: any = {
+            gizmoMeshes: arrow.getChildMeshes(),
+            colliderMeshes: collider.getChildMeshes(),
+            material: this._coloredMaterial,
+            hoverMaterial: this._hoverMaterial,
+            disableMaterial: this._disableMaterial,
+            active: false
+        };
+        this._parent?.addToAxisCache(collider as Mesh, cache);
+
         this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (this._customMeshSet) {
                 return;
             }
-            this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
+            this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
             if (!this._parent) {
                 var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
-                this._rootMesh.getChildMeshes().forEach((m) => {
+                cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                     if ((<LinesMesh>m).color) {
                         (<LinesMesh>m).color = material.diffuseColor;
@@ -169,17 +181,6 @@ export class AxisDragGizmo extends Gizmo {
                 });
             }
         });
-
-        var light = gizmoLayer._getSharedGizmoLight();
-        light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
-
-        const cache: any = {
-            material: this._coloredMaterial,
-            hoverMaterial: this._hoverMaterial,
-            disableMaterial: this._disableMaterial,
-            active: false
-        };
-        this._parent?.addToAxisCache(this._gizmoMesh, cache);
     }
     protected _attachedNodeChanged(value: Nullable<Node>) {
         if (this.dragBehavior) {

src/Gizmos/axisScaleGizmo.ts

@@ -49,7 +49,6 @@ export class AxisScaleGizmo extends Gizmo {
     private _coloredMaterial: StandardMaterial;
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
-    private _eventListeners: any[] = [];
 
     /**
      * Creates an AxisScaleGizmo
@@ -164,12 +163,11 @@ export class AxisScaleGizmo extends Gizmo {
         this.dragBehavior.onDragEndObservable.add(resetGizmoMesh);
 
         // Listeners for Universal Scalar
-        document.addEventListener('universalGizmoDrag', (e) => increaseGizmoMesh((e as any).detail));
-        document.addEventListener('universalGizmoEnd', resetGizmoMesh);
-        this._eventListeners.push({listener: 'universalGizmoDrag', fn: increaseGizmoMesh });
-        this._eventListeners.push({listener: 'universalGizmoEnd', fn: resetGizmoMesh });
+        parent?.uniformScaleGizmo?.dragBehavior?.onDragObservable?.add((e) => increaseGizmoMesh(e.delta.y));
+        parent?.uniformScaleGizmo?.dragBehavior?.onDragEndObservable?.add(resetGizmoMesh);
 
         const cache: any = {
+            gizmoMeshes: this._gizmoMesh.getChildMeshes(),
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
@@ -178,13 +176,13 @@ export class AxisScaleGizmo extends Gizmo {
         this._parent?.addToAxisCache(this._gizmoMesh, cache);
 
         this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
-            if (this._customMeshSet) {
+            if (this._customMeshSet) { // We can Dispose this in setCustomMesh()
                 return;
             }
-            this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
+            this._isHovered = !!(cache.gizmoMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh?.parent) != -1);
             if (!this._parent) {
                 var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
-                this._rootMesh.getChildMeshes().forEach((m) => {
+                cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                     if ((<LinesMesh>m).color) {
                         (<LinesMesh>m).color = material.diffuseColor;
@@ -266,9 +264,6 @@ export class AxisScaleGizmo extends Gizmo {
                 matl.dispose();
             }
         });
-        this._eventListeners.forEach((e) => {
-            document.addEventListener(e.listener, e.fn, false);
-        });
         super.dispose();
     }
 

src/Gizmos/planeDragGizmo.ts

@@ -112,29 +112,31 @@ export class PlaneDragGizmo extends Gizmo {
             }
         });
 
-        this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
-            if (this._customMeshSet) {
-                return;
-            }
-            this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
-            if (!this._parent) {
-                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
-                this._rootMesh.getChildMeshes().forEach((m) => {
-                    m.material = material;
-                });
-            }
-        });
-
         var light = gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
 
         const cache: any = {
+            gizmoMeshes: this._gizmoMesh.getChildMeshes(),
+            colliderMeshes: this._gizmoMesh.getChildMeshes(),
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
             active: false
         };
         this._parent?.addToAxisCache((this._gizmoMesh as Mesh), cache);
+
+        this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
+            if (this._customMeshSet) {
+                return;
+            }
+            this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
+            if (!this._parent) {
+                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
+                cache.gizmoMeshes.forEach((m: Mesh) => {
+                    m.material = material;
+                });
+            }
+        });
     }
     protected _attachedNodeChanged(value: Nullable<Node>) {
         if (this.dragBehavior) {

src/Gizmos/planeRotationGizmo.ts

@@ -41,6 +41,7 @@ export class PlaneRotationGizmo extends Gizmo {
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
     private _gizmoMesh: Mesh;
+    private _rotationCircle: Mesh;
 
     private circleConstants = {
         radius: 0.3,
@@ -74,12 +75,11 @@ export class PlaneRotationGizmo extends Gizmo {
 
         // Build mesh on root node
         this._gizmoMesh = new Mesh("", gizmoLayer.utilityLayerScene);
-        this._createGizmoMesh(this._gizmoMesh, thickness, tessellation);
+        const { rotationMesh, collider } = this._createGizmoMesh(this._gizmoMesh, thickness, tessellation);
 
-        // Axis Gizmo Closures
-        let dragDistance = 0;
+        // Setup Rotation Circle
         const rotationCirclePaths: any[] = [];
-        const rotationCircle: Mesh = this.setupRotationCircle(rotationCirclePaths, this._gizmoMesh);
+        this._rotationCircle = this.setupRotationCircle(rotationCirclePaths, this._gizmoMesh);
 
         this._gizmoMesh.lookAt(this._rootMesh.position.add(planeNormal));
         this._rootMesh.addChild(this._gizmoMesh);
@@ -92,6 +92,7 @@ export class PlaneRotationGizmo extends Gizmo {
         this._rootMesh.addBehavior(this.dragBehavior);
 
         // Closures for drag logic
+        let dragDistance = 0;
         const lastDragPosition = new Vector3();
         let dragPlanePoint = new Vector3();
         const rotationMatrix = new Matrix();
@@ -105,31 +106,31 @@ export class PlaneRotationGizmo extends Gizmo {
                 // This is for instantiation location of rotation circle
                 // Rotation Circle Forward Vector
                 const forward = new Vector3(0, 0, 1);
-                const direction = rotationCircle.getDirection(forward);
+                const direction = this._rotationCircle.getDirection(forward);
                 direction.normalize();
 
                 // Remove Rotation Circle from parent mesh before drag interaction
-                this._gizmoMesh.removeChild(rotationCircle);
+                this._gizmoMesh.removeChild(this._rotationCircle);
 
                 lastDragPosition.copyFrom(e.dragPlanePoint);
                 dragPlanePoint = e.dragPlanePoint;
-                const origin = rotationCircle.getAbsolutePosition().clone();
-                const originalRotationVector = rotationCircle.getAbsolutePosition().clone().addInPlace(direction);
+                const origin = this._rotationCircle.getAbsolutePosition().clone();
+                const originalRotationVector = this._rotationCircle.getAbsolutePosition().clone().addInPlace(direction);
                 const dragStartVector = e.dragPlanePoint;
                 let angle = this.angleBetween3DCoords(origin, originalRotationVector, dragStartVector);
 
-                if (Vector3.Dot(rotationCircle.up, Vector3.Down()) > 0) {
+                if (Vector3.Dot(this._rotationCircle.up, Vector3.Down()) > 0) {
                     angle = -angle;
                 }
 
-                rotationCircle.addRotation(0, angle, 0);
+                this._rotationCircle.addRotation(0, angle, 0);
             }
         });
 
         this.dragBehavior.onDragEndObservable.add(() => {
             dragDistance = 0;
-            this.updateRotationCircle(rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
-            this._gizmoMesh.addChild(rotationCircle);    // Add rotation circle back to parent mesh after drag behavior
+            this.updateRotationCircle(this._rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
+            this._gizmoMesh.addChild(this._rotationCircle);    // Add rotation circle back to parent mesh after drag behavior
         });
 
         var tmpSnapEvent = { snapDistance: 0 };
@@ -186,7 +187,7 @@ export class PlaneRotationGizmo extends Gizmo {
                 }
 
                 dragDistance += cameraFlipped ? -angle : angle;
-                this.updateRotationCircle(rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
+                this.updateRotationCircle(this._rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
 
                 // Convert angle and axis to quaternion (http://www.euclideanspace.com/maths/geometry/rotations/conversions/angleToQuaternion/index.htm)
                 var quaternionCoefficient = Math.sin(angle / 2);
@@ -240,6 +241,8 @@ export class PlaneRotationGizmo extends Gizmo {
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
 
         const cache: any = {
+            colliderMeshes: [ collider ],
+            gizmoMeshes: [ rotationMesh ],
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
@@ -250,17 +253,18 @@ export class PlaneRotationGizmo extends Gizmo {
 
     /** Create Geometry for Gizmo */
     private _createGizmoMesh(parentMesh: AbstractMesh, thickness: number, tessellation: number) {
-        let drag = Mesh.CreateTorus("ignore", 0.6, 0.03 * thickness, tessellation, this.gizmoLayer.utilityLayerScene);
-        drag.visibility = 0;
+        let collider = Mesh.CreateTorus("ignore", 0.6, 0.03 * thickness, tessellation, this.gizmoLayer.utilityLayerScene);
+        collider.visibility = 0;
         let rotationMesh = Mesh.CreateTorus("", 0.6, 0.005 * thickness, tessellation, this.gizmoLayer.utilityLayerScene);
         rotationMesh.material = this._coloredMaterial;
 
         // Position arrow pointing in its drag axis
         rotationMesh.rotation.x = Math.PI / 2;
-        drag.rotation.x = Math.PI / 2;
+        collider.rotation.x = Math.PI / 2;
 
         parentMesh.addChild(rotationMesh);
-        parentMesh.addChild(drag);
+        parentMesh.addChild(collider);
+        return { rotationMesh, collider };
     }
 
     protected _attachedNodeChanged(value: Nullable<Node>) {
@@ -297,11 +301,11 @@ export class PlaneRotationGizmo extends Gizmo {
         return angle;
     }
 
-    private setupRotationCircle(paths: any[], parentMesh: AbstractMesh): Mesh {
+    private setupRotationCircle(paths: Vector3[][], parentMesh: AbstractMesh): Mesh {
         const fillRadians = 0;
         const step = this.circleConstants.pi2 / this.circleConstants.tessellation;
         for (let p = -Math.PI / 2; p < Math.PI / 2 - 1.5; p += step / 2) {
-            const path = [];
+            const path: Vector3[] = [];
             for (let i = 0; i < this.circleConstants.pi2; i += step) {
                 if (i < fillRadians) {
                     const x = this.circleConstants.radius * Math.sin(i) * Math.cos(p);
@@ -327,7 +331,7 @@ export class PlaneRotationGizmo extends Gizmo {
         return mesh;
     }
 
-    private updateRotationPath(pathArr: any[], newFill: number): void {
+    private updateRotationPath(pathArr: Vector3[][], newFill: number): void {
         // To update the Ribbon, you have to mutate the pathArray in-place
         const step = this.circleConstants.pi2 / this.circleConstants.tessellation;
         let tessellationCounter = 0;
@@ -338,15 +342,15 @@ export class PlaneRotationGizmo extends Gizmo {
                 for (let i = 0; i < this.circleConstants.pi2; i += step) {
                     if (path[radianCounter]) {
                         if (i < Math.abs(newFill)) {
-                            const eie = (newFill > 0) ? i : i * -1;
-                            const pea = (newFill > 0) ? p : p * -1;
-                            path[radianCounter].x = this.circleConstants.radius * Math.sin(eie) * Math.cos(pea);
-                            path[radianCounter].z = this.circleConstants.radius * Math.cos(eie) * Math.cos(pea);
-                            path[radianCounter].y = 0;
+                            const absI = (newFill > 0) ? i : i * -1;
+                            const absP = (newFill > 0) ? p : p * -1;
+                            path[radianCounter].set(
+                                this.circleConstants.radius * Math.sin(absI) * Math.cos(absP),
+                                0,
+                                this.circleConstants.radius * Math.cos(absI) * Math.cos(absP)
+                            );
                         } else {
-                            path[radianCounter].x = 0;
-                            path[radianCounter].y = 0;
-                            path[radianCounter].z = 0;
+                            path[radianCounter].set(0, 0, 0);
                         }
                     }
 
@@ -360,7 +364,7 @@ export class PlaneRotationGizmo extends Gizmo {
 
     private updateRotationCircle(mesh: Mesh, paths: any[], newFill: number, dragPlanePoint: Vector3): void {
         this.updateRotationPath(paths, newFill);
-        mesh = Mesh.CreateRibbon("ribbon", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, undefined, undefined, mesh);
+        Mesh.CreateRibbon("ribbon", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, undefined, undefined, mesh);
     }
 
     /**
@@ -390,6 +394,9 @@ export class PlaneRotationGizmo extends Gizmo {
         if (this._gizmoMesh) {
             this._gizmoMesh.dispose();
         }
+        if(this._rotationCircle) {
+            this._rotationCircle.dispose();
+        }
         [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {
             if (matl) {
                 matl.dispose();

src/Gizmos/positionGizmo.ts

@@ -121,6 +121,7 @@ export class PositionGizmo extends Gizmo {
         this.xPlaneGizmo = new PlaneDragGizmo(new Vector3(1, 0, 0), Color3.Red().scale(0.5), this.gizmoLayer, this);
         this.yPlaneGizmo = new PlaneDragGizmo(new Vector3(0, 1, 0), Color3.Green().scale(0.5), this.gizmoLayer, this);
         this.zPlaneGizmo = new PlaneDragGizmo(new Vector3(0, 0, 1), Color3.Blue().scale(0.5), this.gizmoLayer, this);
+        
         // Relay drag events
         [this.xGizmo, this.yGizmo, this.zGizmo, this.xPlaneGizmo, this.yPlaneGizmo, this.zPlaneGizmo].forEach((gizmo) => {
             gizmo.dragBehavior.onDragStartObservable.add(() => {
@@ -219,17 +220,17 @@ export class PositionGizmo extends Gizmo {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
                     if (this.dragging) { return; }
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                        const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.material;
-                        parentMesh.getChildMeshes().forEach((m) => {
-                            if (m.name !== 'ignore') {
+                    this.gizmoAxisCache.forEach((cache) => {
+                        if(cache.colliderMeshes && cache.gizmoMeshes) {
+                            const isHovered = (cache.colliderMeshes?.indexOf((pointerInfo?.pickInfo?.pickedMesh as Mesh)) != -1);
+                            const material = isHovered || cache.active ? cache.hoverMaterial : cache.material;
+                            cache.gizmoMeshes.forEach((m: Mesh) => {
                                 m.material = material;
                                 if ((m as LinesMesh).color) {
                                     (m as LinesMesh).color = material.diffuseColor;
                                 }
-                            }
-                        });
+                            });
+                        }
                     });
                 }
 
@@ -240,15 +241,13 @@ export class PositionGizmo extends Gizmo {
                         this.dragging = true;
                         const statusMap = this.gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                            const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                            const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.disableMaterial;
-                            parentMesh.getChildMeshes().forEach((m) => {
-                                if (m.name !== 'ignore') {
-                                    m.material = material;
-                                    if ((m as LinesMesh).color) {
-                                        (m as LinesMesh).color = material.diffuseColor;
-                                    }
+                        this.gizmoAxisCache.forEach((cache) => {
+                            const isHovered = (cache.colliderMeshes?.indexOf((pointerInfo?.pickInfo?.pickedMesh as Mesh)) != -1);
+                            const material = isHovered || cache.active ? cache.hoverMaterial : cache.disableMaterial;
+                            cache.gizmoMeshes.forEach((m: Mesh) => {
+                                m.material = material;
+                                if ((m as LinesMesh).color) {
+                                    (m as LinesMesh).color = material.diffuseColor;
                                 }
                             });
                         });
@@ -257,14 +256,14 @@ export class PositionGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        statusMap.active = false;
+                    this.gizmoAxisCache.forEach((cache) => {
+                        cache.active = false;
                         this.dragging = false;
-                        parentMesh.getChildMeshes().forEach((m) => {
+                        cache.gizmoMeshes.forEach((m: Mesh) => {
                             if (m.name !== 'ignore') {
-                                m.material = statusMap.material;
+                                m.material = cache.material;
                                 if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = statusMap.material.diffuseColor;
+                                    (m as LinesMesh).color = cache.material.diffuseColor;
                                 }
                             }
                         });

src/Gizmos/rotationGizmo.ts

@@ -178,15 +178,13 @@ export class RotationGizmo extends Gizmo {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
                     if (this.dragging) { return; }
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                        const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.material;
-                        parentMesh.getChildMeshes().forEach((m) => {
-                            if (m.name !== 'ignore') {
-                                m.material = material;
-                                if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = material.diffuseColor;
-                                }
+                    this.gizmoAxisCache.forEach((cache) => {
+                        const isHovered = pointerInfo.pickInfo && (cache.colliderMeshes.indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
+                        const material = isHovered || cache.active ? cache.hoverMaterial : cache.material;
+                        cache.gizmoMeshes.forEach((m: Mesh) => {
+                            m.material = material;
+                            if ((m as LinesMesh).color) {
+                                (m as LinesMesh).color = material.diffuseColor;
                             }
                         });
                     });
@@ -199,15 +197,13 @@ export class RotationGizmo extends Gizmo {
                         this.dragging = true;
                         const statusMap = this.gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                            const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                            const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.disableMaterial;
-                            parentMesh.getChildMeshes().forEach((m) => {
-                                if (m.name !== 'ignore') {
-                                    m.material = material;
-                                    if ((m as LinesMesh).color) {
-                                        (m as LinesMesh).color = material.diffuseColor;
-                                    }
+                        this.gizmoAxisCache.forEach((cache) => {
+                            const isHovered = pointerInfo.pickInfo && (cache.colliderMeshes.indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
+                            const material = isHovered || cache.active ? cache.hoverMaterial : cache.disableMaterial;
+                            cache.gizmoMeshes.forEach((m: Mesh) => {
+                                m.material = material;
+                                if ((m as LinesMesh).color) {
+                                    (m as LinesMesh).color = material.diffuseColor;
                                 }
                             });
                         });
@@ -216,15 +212,13 @@ export class RotationGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        statusMap.active = false;
+                    this.gizmoAxisCache.forEach((cache) => {
+                        cache.active = false;
                         this.dragging = false;
-                        parentMesh.getChildMeshes().forEach((m) => {
-                            if (m.name !== 'ignore') {
-                                m.material = statusMap.material;
-                                if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = statusMap.material.diffuseColor;
-                                }
+                        cache.colliderMeshes.forEach((m: Mesh) => {
+                            m.material = cache.material;
+                            if ((m as LinesMesh).color) {
+                                (m as LinesMesh).color = cache.material.diffuseColor;
                             }
                         });
                     });

src/Gizmos/scaleGizmo.ts

@@ -106,10 +106,10 @@ export class ScaleGizmo extends Gizmo {
      */
     constructor(gizmoLayer: UtilityLayerRenderer = UtilityLayerRenderer.DefaultUtilityLayer, thickness: number = 1) {
         super(gizmoLayer);
+        this.uniformScaleGizmo = this._createUniformScaleMesh();
         this.xGizmo = new AxisScaleGizmo(new Vector3(1, 0, 0), Color3.Red().scale(0.5), gizmoLayer, this, thickness);
         this.yGizmo = new AxisScaleGizmo(new Vector3(0, 1, 0), Color3.Green().scale(0.5), gizmoLayer, this, thickness);
         this.zGizmo = new AxisScaleGizmo(new Vector3(0, 0, 1), Color3.Blue().scale(0.5), gizmoLayer, this, thickness);
-        this.uniformScaleGizmo = this._createUniformScaleMesh();
 
         // Relay drag events
         [this.xGizmo, this.yGizmo, this.zGizmo, this.uniformScaleGizmo].forEach((gizmo) => {
@@ -142,7 +142,7 @@ export class ScaleGizmo extends Gizmo {
         uniformScaleGizmo.updateGizmoRotationToMatchAttachedMesh = false;
         uniformScaleGizmo.uniformScaling = true;
         this._uniformScalingMesh = PolyhedronBuilder.CreatePolyhedron("uniform", { type: 1 }, uniformScaleGizmo.gizmoLayer.utilityLayerScene);
-        this._uniformScalingMesh.scaling.scaleInPlace(0.02);
+        this._uniformScalingMesh.scaling.scaleInPlace(0.01);
         this._uniformScalingMesh.visibility = 0;
         this._octahedron = PolyhedronBuilder.CreatePolyhedron("", { type: 1 }, uniformScaleGizmo.gizmoLayer.utilityLayerScene);
         this._octahedron.scaling.scaleInPlace(0.007);
@@ -151,18 +151,8 @@ export class ScaleGizmo extends Gizmo {
         var light = this.gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._octahedron);
 
-        // Drag Event Listeners
-        uniformScaleGizmo.dragBehavior.onDragObservable.add((e) => {
-            document.dispatchEvent(new CustomEvent('universalGizmoDrag', {
-                detail: e.delta.y
-            }));
-        });
-
-        uniformScaleGizmo.dragBehavior.onDragEndObservable.add((e) => {
-            document.dispatchEvent(new CustomEvent('universalGizmoEnd'));
-        });
-
         const cache = {
+            gizmoMeshes: uniformScaleGizmo._rootMesh.getChildMeshes(),
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
@@ -254,15 +244,13 @@ export class ScaleGizmo extends Gizmo {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
                     if (this.dragging) { return; }
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                        const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.material;
-                        parentMesh.getChildMeshes().forEach((m) => {
-                            if (m.name !== 'ignore') {
-                                m.material = material;
-                                if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = material.diffuseColor;
-                                }
+                    this.gizmoAxisCache.forEach((cache) => {
+                        const isHovered = (cache.gizmoMeshes.indexOf(pointerInfo?.pickInfo?.pickedMesh as Mesh) != -1);
+                        const material = isHovered || cache.active ? cache.hoverMaterial : cache.material;
+                        cache.gizmoMeshes.forEach((m: Mesh) => {
+                            m.material = material;
+                            if ((m as LinesMesh).color) {
+                                (m as LinesMesh).color = material.diffuseColor;
                             }
                         });
                     });
@@ -272,18 +260,17 @@ export class ScaleGizmo extends Gizmo {
                 if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
                     // If user Clicked Gizmo
                     if (this.gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
+                        console.log(pointerInfo.pickInfo.pickedMesh)
                         this.dragging = true;
                         const statusMap = this.gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                            const isHovered = pointerInfo.pickInfo && (parentMesh.getChildMeshes().indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
-                            const material = isHovered || statusMap.active ? statusMap.hoverMaterial : statusMap.disableMaterial;
-                            parentMesh.getChildMeshes().forEach((m) => {
-                                if (m.name !== 'ignore') {
-                                    m.material = material;
-                                    if ((m as LinesMesh).color) {
-                                        (m as LinesMesh).color = material.diffuseColor;
-                                    }
+                        this.gizmoAxisCache.forEach((cache) => {
+                            const isHovered = cache.gizmoMeshes.indexOf((pointerInfo?.pickInfo?.pickedMesh?.parent as Mesh)) != -1;
+                            const material = isHovered || cache.active ? cache.hoverMaterial : cache.disableMaterial;
+                            cache.gizmoMeshes.forEach((m: Mesh) => {
+                                m.material = material;
+                                if ((m as LinesMesh).color) {
+                                    (m as LinesMesh).color = material.diffuseColor;
                                 }
                             });
                         });
@@ -292,15 +279,13 @@ export class ScaleGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((statusMap, parentMesh) => {
-                        statusMap.active = false;
+                    this.gizmoAxisCache.forEach((cache) => {
+                        cache.active = false;
                         this.dragging = false;
-                        parentMesh.getChildMeshes().forEach((m) => {
-                            if (m.name !== 'ignore') {
-                                m.material = statusMap.material;
-                                if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = statusMap.material.diffuseColor;
-                                }
+                        cache.gizmoMeshes.forEach((m: Mesh) => {
+                            m.material = cache.material;
+                            if ((m as LinesMesh).color) {
+                                (m as LinesMesh).color = cache.material.diffuseColor;
                             }
                         });
                     });