Gizmo Mesh Upgrade - PR Revisions

src/Gizmos/axisDragGizmo.ts

@@ -8,7 +8,7 @@ import { Mesh } from "../Meshes/mesh";
 import { LinesMesh } from "../Meshes/linesMesh";
 import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { Scene } from "../scene";
@@ -59,9 +59,7 @@ export class AxisDragGizmo extends Gizmo {
         line.rotation.x = Math.PI / 2;
 
         if (isCollider) {
-            line.name = 'ignore';
             line.visibility = 0;
-            cylinder.name = 'ignore';
             cylinder.visibility = 0;
         }
         return arrow;
@@ -156,9 +154,9 @@ 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(),
+        const cache: GizmoAxisCache = {
+            gizmoMeshes: arrow.getChildMeshes() as Mesh[],
+            colliderMeshes: collider.getChildMeshes() as Mesh[],
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,

src/Gizmos/axisScaleGizmo.ts

@@ -10,7 +10,7 @@ import { BoxBuilder } from "../Meshes/Builders/boxBuilder";
 import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { ScaleGizmo } from "./scaleGizmo";
 import { Color3 } from '../Maths/math.color';
@@ -75,7 +75,7 @@ export class AxisScaleGizmo extends Gizmo {
         // Build mesh + Collider
         this._gizmoMesh = new Mesh("axis", gizmoLayer.utilityLayerScene);
         const { arrowMesh, arrowTail } = this._createGizmoMesh(this._gizmoMesh, thickness);
-        this._createGizmoMesh(this._gizmoMesh, thickness * 4, true);
+        const collider = this._createGizmoMesh(this._gizmoMesh, thickness + 4, true);
 
         this._gizmoMesh.lookAt(this._rootMesh.position.add(dragAxis));
         this._rootMesh.addChild(this._gizmoMesh);
@@ -100,9 +100,9 @@ export class AxisScaleGizmo extends Gizmo {
         };
 
         const resetGizmoMesh = () => {
-            arrowMesh.position = new Vector3(nodePosition.x, nodePosition.y, nodePosition.z);
-            arrowTail.position = new Vector3(linePosition.x, linePosition.y, linePosition.z);
-            arrowTail.scaling = new Vector3(lineScale.x, lineScale.y, lineScale.z);
+            arrowMesh.position.set(nodePosition.x, nodePosition.y, nodePosition.z);
+            arrowTail.position.set(linePosition.x, linePosition.y, linePosition.z);
+            arrowTail.scaling.set(lineScale.x, lineScale.y, lineScale.z);
         };
 
         // Add drag behavior to handle events when the gizmo is dragged
@@ -166,8 +166,9 @@ export class AxisScaleGizmo extends Gizmo {
         parent?.uniformScaleGizmo?.dragBehavior?.onDragObservable?.add((e) => increaseGizmoMesh(e.delta.y));
         parent?.uniformScaleGizmo?.dragBehavior?.onDragEndObservable?.add(resetGizmoMesh);
 
-        const cache: any = {
-            gizmoMeshes: this._gizmoMesh.getChildMeshes(),
+        const cache: GizmoAxisCache = {
+            gizmoMeshes: [arrowMesh, arrowTail],
+            colliderMeshes: [collider.arrowMesh, collider.arrowTail],
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
@@ -176,10 +177,10 @@ export class AxisScaleGizmo extends Gizmo {
         this._parent?.addToAxisCache(this._gizmoMesh, cache);
 
         this._pointerObserver = gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
-            if (this._customMeshSet) { // We can Dispose this in setCustomMesh()
+            if (this._customMeshSet) {
                 return;
             }
-            this._isHovered = !!(cache.gizmoMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh?.parent) != -1);
+            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) => {
@@ -211,9 +212,7 @@ export class AxisScaleGizmo extends Gizmo {
         arrowTail.rotation.x = Math.PI / 2;
 
         if (isCollider) {
-            arrowMesh.name = 'ignore';
             arrowMesh.visibility = 0;
-            arrowTail.name = 'ignore';
             arrowTail.visibility = 0;
         }
 

src/Gizmos/gizmo.ts

@@ -11,6 +11,16 @@ import { Node } from "../node";
 import { Bone } from "../Bones/bone";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { TransformNode } from '../Meshes/transformNode';
+import { StandardMaterial } from 'Materials';
+
+export interface GizmoAxisCache {
+    gizmoMeshes: Mesh[];
+    colliderMeshes: Mesh[];
+    material: StandardMaterial;
+    hoverMaterial: StandardMaterial;
+    disableMaterial: StandardMaterial;
+    active: boolean;
+}
 /**
  * Renders gizmos on top of an existing scene which provide controls for position, rotation, etc.
  */

src/Gizmos/planeDragGizmo.ts

@@ -8,7 +8,7 @@ import { Node } from "../node";
 import { Mesh } from "../Meshes/mesh";
 import { PlaneBuilder } from "../Meshes/Builders/planeBuilder";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { Scene } from "../scene";
@@ -115,9 +115,9 @@ export class PlaneDragGizmo extends Gizmo {
         var light = gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
 
-        const cache: any = {
-            gizmoMeshes: this._gizmoMesh.getChildMeshes(),
-            colliderMeshes: this._gizmoMesh.getChildMeshes(),
+        const cache: GizmoAxisCache = {
+            gizmoMeshes: this._gizmoMesh.getChildMeshes() as Mesh[],
+            colliderMeshes: this._gizmoMesh.getChildMeshes() as Mesh[],
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,

src/Gizmos/planeRotationGizmo.ts

@@ -8,7 +8,7 @@ import { LinesMesh } from '../Meshes/linesMesh';
 import { Mesh } from "../Meshes/mesh";
 import { Node } from "../node";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import "../Meshes/Builders/linesBuilder";   // Why
 import { StandardMaterial } from "../Materials/standardMaterial";
@@ -43,7 +43,7 @@ export class PlaneRotationGizmo extends Gizmo {
     private _gizmoMesh: Mesh;
     private _rotationCircle: Mesh;
 
-    private circleConstants = {
+    private static _CircleConstants = {
         radius: 0.3,
         pi2: Math.PI * 2,
         tessellation: 360
@@ -221,14 +221,27 @@ export class PlaneRotationGizmo extends Gizmo {
             }
         });
 
+        var light = gizmoLayer._getSharedGizmoLight();
+        light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
+
+        const cache: GizmoAxisCache = {
+            colliderMeshes: [ collider ],
+            gizmoMeshes: [ rotationMesh ],
+            material: this._coloredMaterial,
+            hoverMaterial: this._hoverMaterial,
+            disableMaterial: this._disableMaterial,
+            active: false
+        };
+        this._parent?.addToAxisCache(this._gizmoMesh, 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;
@@ -236,19 +249,6 @@ export class PlaneRotationGizmo extends Gizmo {
                 });
             }
         });
-
-        var light = gizmoLayer._getSharedGizmoLight();
-        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,
-            active: false
-        };
-        this._parent?.addToAxisCache(this._gizmoMesh, cache);
     }
 
     /** Create Geometry for Gizmo */
@@ -303,13 +303,13 @@ export class PlaneRotationGizmo extends Gizmo {
 
     private setupRotationCircle(paths: Vector3[][], parentMesh: AbstractMesh): Mesh {
         const fillRadians = 0;
-        const step = this.circleConstants.pi2 / this.circleConstants.tessellation;
+        const step = PlaneRotationGizmo._CircleConstants.pi2 / PlaneRotationGizmo._CircleConstants.tessellation;
         for (let p = -Math.PI / 2; p < Math.PI / 2 - 1.5; p += step / 2) {
             const path: Vector3[] = [];
-            for (let i = 0; i < this.circleConstants.pi2; i += step) {
+            for (let i = 0; i < PlaneRotationGizmo._CircleConstants.pi2; i += step) {
                 if (i < fillRadians) {
-                    const x = this.circleConstants.radius * Math.sin(i) * Math.cos(p);
-                    const z = this.circleConstants.radius * Math.cos(i) * Math.cos(p);
+                    const x = PlaneRotationGizmo._CircleConstants.radius * Math.sin(i) * Math.cos(p);
+                    const z = PlaneRotationGizmo._CircleConstants.radius * Math.cos(i) * Math.cos(p);
                     const y = 0;
                     path.push(new Vector3(x, y, z));
                 } else {
@@ -323,7 +323,7 @@ export class PlaneRotationGizmo extends Gizmo {
         const mat = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
         mat.diffuseColor = Color3.Yellow();
         mat.backFaceCulling = false;
-        const mesh = Mesh.CreateRibbon("ignore", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, true);
+        const mesh = Mesh.CreateRibbon("rotationCircle", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, true);
         mesh.material = mat;
         mesh.material.alpha = .25;
         mesh.rotation.x = Math.PI / 2;
@@ -333,21 +333,21 @@ export class PlaneRotationGizmo extends Gizmo {
 
     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;
+        const step = PlaneRotationGizmo._CircleConstants.pi2 / PlaneRotationGizmo._CircleConstants.tessellation;
         let tessellationCounter = 0;
         for (let p = -Math.PI / 2; p < Math.PI / 2 - 1.5; p += step / 2) {
             const path = pathArr[tessellationCounter];
             if (path) {
                 let radianCounter = 0;
-                for (let i = 0; i < this.circleConstants.pi2; i += step) {
+                for (let i = 0; i < PlaneRotationGizmo._CircleConstants.pi2; i += step) {
                     if (path[radianCounter]) {
                         if (i < Math.abs(newFill)) {
                             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),
+                                PlaneRotationGizmo._CircleConstants.radius * Math.sin(absI) * Math.cos(absP),
                                 0,
-                                this.circleConstants.radius * Math.cos(absI) * Math.cos(absP)
+                                PlaneRotationGizmo._CircleConstants.radius * Math.cos(absI) * Math.cos(absP)
                             );
                         } else {
                             path[radianCounter].set(0, 0, 0);
@@ -364,7 +364,7 @@ export class PlaneRotationGizmo extends Gizmo {
 
     private updateRotationCircle(mesh: Mesh, paths: any[], newFill: number, dragPlanePoint: Vector3): void {
         this.updateRotationPath(paths, newFill);
-        Mesh.CreateRibbon("ribbon", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, undefined, undefined, mesh);
+        Mesh.CreateRibbon("rotationCircle", paths, false, false, 0, this.gizmoLayer.utilityLayerScene, undefined, undefined, mesh);
     }
 
     /**
@@ -394,7 +394,7 @@ export class PlaneRotationGizmo extends Gizmo {
         if (this._gizmoMesh) {
             this._gizmoMesh.dispose();
         }
-        if(this._rotationCircle) {
+        if (this._rotationCircle) {
             this._rotationCircle.dispose();
         }
         [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {

src/Gizmos/positionGizmo.ts

@@ -6,7 +6,7 @@ import { Color3 } from '../Maths/math.color';
 import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Node } from "../node";
 import { Mesh } from "../Meshes/mesh";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { AxisDragGizmo } from "./axisDragGizmo";
 import { PlaneDragGizmo } from "./planeDragGizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
@@ -50,9 +50,9 @@ export class PositionGizmo extends Gizmo {
     private _observables: Nullable<Observer<PointerInfo>>[] = [];
 
     /** Gizmo state variables used for UI behavior */
-    private dragging = false;
+    private _dragging = false;
     /** Node Caching for quick lookup */
-    private gizmoAxisCache: Map<Mesh, any> = new Map();
+    private _gizmoAxisCache: Map<Mesh, GizmoAxisCache> = new Map();
 
     /** Fires an event when any of it's sub gizmos are dragged */
     public onDragStartObservable = new Observable();
@@ -121,7 +121,6 @@ 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(() => {
@@ -133,7 +132,7 @@ export class PositionGizmo extends Gizmo {
         });
 
         this.attachedMesh = null;
-        this.subscribeToPointerObserver();
+        this._subscribeToPointerObserver();
     }
 
     /**
@@ -207,21 +206,21 @@ export class PositionGizmo extends Gizmo {
      * @param mesh Axis gizmo mesh
       @param cache display gizmo axis thickness
      */
-    public addToAxisCache(mesh: Mesh, cache: any) {
-        this.gizmoAxisCache.set(mesh, cache);
+    public addToAxisCache(mesh: Mesh, cache: GizmoAxisCache) {
+        this._gizmoAxisCache.set(mesh, cache);
     }
 
     /**
      * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
      */
-    public subscribeToPointerObserver(): void {
+    public _subscribeToPointerObserver(): void {
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-                    if (this.dragging) { return; }
-                    this.gizmoAxisCache.forEach((cache) => {
-                        if(cache.colliderMeshes && cache.gizmoMeshes) {
+                    if (this._dragging) { return; }
+                    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) => {
@@ -237,11 +236,11 @@ export class PositionGizmo extends Gizmo {
                 // On Mouse Down
                 if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
                     // If user Clicked Gizmo
-                    if (this.gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
-                        this.dragging = true;
-                        const statusMap = this.gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
+                    if (this._gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
+                        this._dragging = true;
+                        const statusMap = this._gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((cache) => {
+                        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) => {
@@ -256,15 +255,13 @@ export class PositionGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((cache) => {
+                    this._gizmoAxisCache.forEach((cache) => {
                         cache.active = false;
-                        this.dragging = false;
+                        this._dragging = false;
                         cache.gizmoMeshes.forEach((m: Mesh) => {
-                            if (m.name !== 'ignore') {
-                                m.material = cache.material;
-                                if ((m as LinesMesh).color) {
-                                    (m as LinesMesh).color = cache.material.diffuseColor;
-                                }
+                            m.material = cache.material;
+                            if ((m as LinesMesh).color) {
+                                (m as LinesMesh).color = cache.material.diffuseColor;
                             }
                         });
                     });

src/Gizmos/rotationGizmo.ts

@@ -5,7 +5,7 @@ import { Vector3 } from "../Maths/math.vector";
 import { Color3 } from '../Maths/math.color';
 import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Mesh } from "../Meshes/mesh";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { PlaneRotationGizmo } from "./planeRotationGizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { Node } from "../node";
@@ -39,9 +39,9 @@ export class RotationGizmo extends Gizmo {
     private _observables: Nullable<Observer<PointerInfo>>[] = [];
 
     /** Gizmo state variables used for UI behavior */
-    private dragging = false;
+    private _dragging = false;
     /** Node Caching for quick lookup */
-    private gizmoAxisCache: Map<Mesh, any> = new Map();
+    private _gizmoAxisCache: Map<Mesh, GizmoAxisCache> = new Map();
 
     public get attachedMesh() {
         return this._meshAttached;
@@ -119,7 +119,7 @@ export class RotationGizmo extends Gizmo {
 
         this.attachedMesh = null;
         this.attachedNode = null;
-        this.subscribeToPointerObserver();
+        this._subscribeToPointerObserver();
     }
 
     public set updateGizmoRotationToMatchAttachedMesh(value: boolean) {
@@ -165,40 +165,42 @@ export class RotationGizmo extends Gizmo {
      * @param mesh Axis gizmo mesh
       @param cache display gizmo axis thickness
      */
-    public addToAxisCache(mesh: Mesh, cache: any) {
-        this.gizmoAxisCache.set(mesh, cache);
+    public addToAxisCache(mesh: Mesh, cache: GizmoAxisCache) {
+        this._gizmoAxisCache.set(mesh, cache);
     }
 
     /**
      * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
      */
-    public subscribeToPointerObserver(): void {
+    public _subscribeToPointerObserver(): void {
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-                    if (this.dragging) { return; }
-                    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;
-                            }
-                        });
+                    if (this._dragging) { return; }
+                    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;
+                                }
+                            });
+                        }
                     });
                 }
 
                 // On Mouse Down
                 if (pointerInfo.type === PointerEventTypes.POINTERDOWN) {
                     // If user Clicked Gizmo
-                    if (this.gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
-                        this.dragging = true;
-                        const statusMap = this.gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
+                    if (this._gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
+                        this._dragging = true;
+                        const statusMap = this._gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((cache) => {
-                            const isHovered = pointerInfo.pickInfo && (cache.colliderMeshes.indexOf((pointerInfo.pickInfo.pickedMesh as Mesh)) != -1);
+                        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;
@@ -212,10 +214,10 @@ export class RotationGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((cache) => {
+                    this._gizmoAxisCache.forEach((cache) => {
                         cache.active = false;
-                        this.dragging = false;
-                        cache.colliderMeshes.forEach((m: Mesh) => {
+                        this._dragging = false;
+                        cache.gizmoMeshes.forEach((m: Mesh) => {
                             m.material = cache.material;
                             if ((m as LinesMesh).color) {
                                 (m as LinesMesh).color = cache.material.diffuseColor;

src/Gizmos/scaleGizmo.ts

@@ -5,7 +5,7 @@ import { Vector3 } from "../Maths/math.vector";
 import { Color3 } from '../Maths/math.color';
 import { AbstractMesh } from "../Meshes/abstractMesh";
 import { PolyhedronBuilder } from "../Meshes/Builders/polyhedronBuilder";
-import { Gizmo } from "./gizmo";
+import { Gizmo, GizmoAxisCache } from "./gizmo";
 import { AxisScaleGizmo } from "./axisScaleGizmo";
 import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { Mesh } from "../Meshes/mesh";
@@ -47,9 +47,9 @@ export class ScaleGizmo extends Gizmo {
     private _observables: Nullable<Observer<PointerInfo>>[] = [];
 
     /** Gizmo state variables used for UI behavior */
-    private dragging = false;
+    private _dragging = false;
     /** Node Caching for quick lookup */
-    private gizmoAxisCache: Map<Mesh, any> = new Map();
+    private _gizmoAxisCache: Map<Mesh, GizmoAxisCache> = new Map();
 
     /** Fires an event when any of it's sub gizmos are dragged */
     public onDragStartObservable = new Observable();
@@ -123,7 +123,7 @@ export class ScaleGizmo extends Gizmo {
 
         this.attachedMesh = null;
         this.attachedNode = null;
-        this.subscribeToPointerObserver();
+        this._subscribeToPointerObserver();
     }
 
     /** Create Geometry for Gizmo */
@@ -151,8 +151,9 @@ export class ScaleGizmo extends Gizmo {
         var light = this.gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._octahedron);
 
-        const cache = {
-            gizmoMeshes: uniformScaleGizmo._rootMesh.getChildMeshes(),
+        const cache: GizmoAxisCache = {
+            gizmoMeshes: [this._octahedron, this._uniformScalingMesh],
+            colliderMeshes: [this._uniformScalingMesh],
             material: this._coloredMaterial,
             hoverMaterial: this._hoverMaterial,
             disableMaterial: this._disableMaterial,
@@ -231,41 +232,42 @@ export class ScaleGizmo extends Gizmo {
      * @param mesh Axis gizmo mesh
       @param cache display gizmo axis thickness
      */
-    public addToAxisCache(mesh: Mesh, cache: any) {
-        this.gizmoAxisCache.set(mesh, cache);
+    public addToAxisCache(mesh: Mesh, cache: GizmoAxisCache) {
+        this._gizmoAxisCache.set(mesh, cache);
     }
 
     /**
      * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
      */
-    public subscribeToPointerObserver(): void {
+    public _subscribeToPointerObserver(): void {
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic
                 if (pointerInfo.type === PointerEventTypes.POINTERMOVE) {
-                    if (this.dragging) { return; }
-                    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;
-                            }
-                        });
+                    if (this._dragging) { return; }
+                    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;
+                                }
+                            });
+                        }
                     });
                 }
 
                 // On Mouse Down
                 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);
+                    if (this._gizmoAxisCache.has(pointerInfo.pickInfo.pickedMesh?.parent as Mesh)) {
+                        this._dragging = true;
+                        const statusMap = this._gizmoAxisCache.get(pointerInfo.pickInfo.pickedMesh?.parent as Mesh);
                         statusMap!.active = true;
-                        this.gizmoAxisCache.forEach((cache) => {
-                            const isHovered = cache.gizmoMeshes.indexOf((pointerInfo?.pickInfo?.pickedMesh?.parent as Mesh)) != -1;
+                        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;
@@ -279,9 +281,9 @@ export class ScaleGizmo extends Gizmo {
 
                 // On Mouse Up
                 if (pointerInfo.type === PointerEventTypes.POINTERUP) {
-                    this.gizmoAxisCache.forEach((cache) => {
+                    this._gizmoAxisCache.forEach((cache) => {
                         cache.active = false;
-                        this.dragging = false;
+                        this._dragging = false;
                         cache.gizmoMeshes.forEach((m: Mesh) => {
                             m.material = cache.material;
                             if ((m as LinesMesh).color) {