Gizmo Mesh Upgrade - Refactory

src/Gizmos/axisDragGizmo.ts

@@ -42,8 +42,8 @@ export class AxisDragGizmo extends Gizmo {
     private _disableMaterial: StandardMaterial;
 
     /** @hidden */
-    public static _CreateArrow(scene: Scene, material: StandardMaterial, thickness: number = 1, isCollider = false): Mesh {
-        var arrow = new Mesh("arrow", scene);
+    public static _CreateArrow(scene: Scene, material: StandardMaterial, thickness: number = 1, isCollider = false): TransformNode {
+        var arrow = new TransformNode("arrow", scene);
         var cylinder = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 0.075, diameterBottom: 0.0375 * (1 + (thickness - 1) / 4), tessellation: 96 }, scene);
         var line = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0.005 * thickness, height: 0.275, diameterBottom: 0.005 * thickness, tessellation: 96 }, scene);
 
@@ -160,7 +160,6 @@ export class AxisDragGizmo extends Gizmo {
             }
             this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
             if (!this._parent) {
-                // Enable Hover Events for AxisViewer use-case
                 var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
                 this._rootMesh.getChildMeshes().forEach((m) => {
                     m.material = material;
@@ -181,7 +180,7 @@ export class AxisDragGizmo extends Gizmo {
             disableMaterial: this._disableMaterial,
             active: false
         };
-        this._parent?.addToAxisCache((this._gizmoMesh as Mesh), cache);
+        this._parent?.addToAxisCache(this._gizmoMesh, cache);
     }
     protected _attachedNodeChanged(value: Nullable<Node>) {
         if (this.dragBehavior) {

src/Gizmos/axisScaleGizmo.ts

@@ -180,7 +180,6 @@ export class AxisScaleGizmo extends Gizmo {
             }
             this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
             if (!this._parent) {
-                // Enable Hover Events for AxisViewer use-case
                 var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
                 this._rootMesh.getChildMeshes().forEach((m) => {
                     m.material = material;
@@ -258,7 +257,7 @@ export class AxisScaleGizmo extends Gizmo {
         if (this._gizmoMesh) {
             this._gizmoMesh.dispose();
         }
-        [this._coloredMaterial, this._hoverMaterial].forEach((matl) => {
+        [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {
             if (matl) {
                 matl.dispose();
             }

src/Gizmos/planeDragGizmo.ts

@@ -13,6 +13,7 @@ import { UtilityLayerRenderer } from "../Rendering/utilityLayerRenderer";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { Scene } from "../scene";
 import { PositionGizmo } from "./positionGizmo";
+import { LinesMesh } from 'Meshes/linesMesh';
 /**
  * Single plane drag gizmo
  */
@@ -32,7 +33,7 @@ export class PlaneDragGizmo extends Gizmo {
      */
     public onSnapObservable = new Observable<{ snapDistance: number }>();
 
-    private _plane: TransformNode;
+    private _gizmoMesh: TransformNode;
     private _coloredMaterial: StandardMaterial;
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
@@ -50,7 +51,7 @@ export class PlaneDragGizmo extends Gizmo {
         dragPlane.parent = plane;
         return plane;
     }
-    
+
     /**
      * Creates a PlaneDragGizmo
      * @param gizmoLayer The utility layer the gizmo will be added to
@@ -73,11 +74,11 @@ export class PlaneDragGizmo extends Gizmo {
         this._disableMaterial.alpha = 0.4;
 
         // Build plane mesh on root node
-        this._plane = PlaneDragGizmo._CreatePlane(gizmoLayer.utilityLayerScene, this._coloredMaterial);
+        this._gizmoMesh = PlaneDragGizmo._CreatePlane(gizmoLayer.utilityLayerScene, this._coloredMaterial);
 
-        this._plane.lookAt(this._rootMesh.position.add(dragPlaneNormal));
-        this._plane.scaling.scaleInPlace(1 / 3);
-        this._plane.parent = this._rootMesh;
+        this._gizmoMesh.lookAt(this._rootMesh.position.add(dragPlaneNormal));
+        this._gizmoMesh.scaling.scaleInPlace(1 / 3);
+        this._gizmoMesh.parent = this._rootMesh;
 
         var currentSnapDragDistance = 0;
         var tmpVector = new Vector3();
@@ -112,6 +113,22 @@ 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;
+                    if ((<LinesMesh>m).color) {
+                        (<LinesMesh>m).color = material.diffuseColor;
+                    }
+                });
+            }
+        });
+
         var light = gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
 
@@ -121,7 +138,7 @@ export class PlaneDragGizmo extends Gizmo {
             disableMaterial: this._disableMaterial,
             active: false
         };
-        this._parent?.addToAxisCache((this._plane as Mesh), cache);
+        this._parent?.addToAxisCache((this._gizmoMesh as Mesh), cache);
     }
     protected _attachedNodeChanged(value: Nullable<Node>) {
         if (this.dragBehavior) {
@@ -154,10 +171,10 @@ export class PlaneDragGizmo extends Gizmo {
         this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
         this.dragBehavior.detach();
         super.dispose();
-        if (this._plane) {
-            this._plane.dispose();
+        if (this._gizmoMesh) {
+            this._gizmoMesh.dispose();
         }
-        [this._coloredMaterial, this._hoverMaterial].forEach((matl) => {
+        [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {
             if (matl) {
                 matl.dispose();
             }

src/Gizmos/planeRotationGizmo.ts

@@ -39,6 +39,7 @@ export class PlaneRotationGizmo extends Gizmo {
     private _coloredMaterial: StandardMaterial;
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
+    private _gizmoMesh: Mesh;
 
     private circleConstants = {
         radius: 0.3,
@@ -71,17 +72,17 @@ export class PlaneRotationGizmo extends Gizmo {
         this._disableMaterial.alpha = 0.4;
 
         // Build mesh on root node
-        var parentMesh = new AbstractMesh("", gizmoLayer.utilityLayerScene);
-        this._createGizmoMesh(parentMesh, thickness, tessellation);
+        this._gizmoMesh = new Mesh("", gizmoLayer.utilityLayerScene);
+        this._createGizmoMesh(this._gizmoMesh, thickness, tessellation);
 
         // Axis Gizmo Closures
         let dragDistance = 0;
         const rotationCirclePaths: any[] = [];
-        const rotationCircle: Mesh = this.setupRotationCircle(rotationCirclePaths, parentMesh);
+        const rotationCircle: Mesh = this.setupRotationCircle(rotationCirclePaths, this._gizmoMesh);
 
-        parentMesh.lookAt(this._rootMesh.position.add(planeNormal));
-        this._rootMesh.addChild(parentMesh);
-        parentMesh.scaling.scaleInPlace(1 / 3);
+        this._gizmoMesh.lookAt(this._rootMesh.position.add(planeNormal));
+        this._rootMesh.addChild(this._gizmoMesh);
+        this._gizmoMesh.scaling.scaleInPlace(1 / 3);
         // Add drag behavior to handle events when the gizmo is dragged
         this.dragBehavior = new PointerDragBehavior({ dragPlaneNormal: planeNormal });
         this.dragBehavior.moveAttached = false;
@@ -107,7 +108,7 @@ export class PlaneRotationGizmo extends Gizmo {
                 direction.normalize();
 
                 // Remove Rotation Circle from parent mesh before drag interaction
-                parentMesh.removeChild(rotationCircle);
+                this._gizmoMesh.removeChild(rotationCircle);
                 
                 lastDragPosition.copyFrom(e.dragPlanePoint);
                 dragPlanePoint = e.dragPlanePoint;
@@ -127,7 +128,7 @@ export class PlaneRotationGizmo extends Gizmo {
         this.dragBehavior.onDragEndObservable.add(() => {
             dragDistance = 0;
             this.updateRotationCircle(rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
-            parentMesh.addChild(rotationCircle);    // Add rotation circle back to parent mesh after drag behavior
+            this._gizmoMesh.addChild(rotationCircle);    // Add rotation circle back to parent mesh after drag behavior
         });
 
         // var rotationMatrix = new Matrix();
@@ -228,7 +229,6 @@ export class PlaneRotationGizmo extends Gizmo {
             }
             this._isHovered = !!(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1));
             if (!this._parent) {
-                // Enable Hover Events for AxisViewer use-case
                 var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
                 this._rootMesh.getChildMeshes().forEach((m) => {
                     m.material = material;
@@ -248,7 +248,7 @@ export class PlaneRotationGizmo extends Gizmo {
             disableMaterial: this._disableMaterial,
             active: false
         };
-        this._parent?.addToAxisCache((parentMesh as Mesh), cache);
+        this._parent?.addToAxisCache(this._gizmoMesh, cache);
     }
 
     private _createGizmoMesh(parentMesh: AbstractMesh, thickness: number, tessellation: number){
@@ -389,6 +389,14 @@ export class PlaneRotationGizmo extends Gizmo {
         this.onSnapObservable.clear();
         this.gizmoLayer.utilityLayerScene.onPointerObservable.remove(this._pointerObserver);
         this.dragBehavior.detach();
+        if (this._gizmoMesh) {
+            this._gizmoMesh.dispose();
+        }
+        [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {
+            if (matl) {
+                matl.dispose();
+            }
+        });
         super.dispose();
     }
 }

src/Gizmos/positionGizmo.ts

@@ -210,9 +210,10 @@ export class PositionGizmo extends Gizmo {
         this.gizmoAxisCache.set(mesh, cache);
     }
 
+    /**
+     * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
+     */
     public subscribeToPointerObserver(): void {
-        // Assumption, if user sets custom mesh, it will be disposed and pointerInfo will never hold reference to that mesh.
-        // Will be equivilent to if (this._customMeshSet) return;
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic

src/Gizmos/rotationGizmo.ts

@@ -160,9 +160,10 @@ export class RotationGizmo extends Gizmo {
         this.gizmoAxisCache.set(mesh, cache);
     }
 
+    /**
+     * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
+     */
     public subscribeToPointerObserver(): void {
-        // Assumption, if user sets custom mesh, it will be disposed and pointerInfo will never hold reference to that mesh.
-        // Will be equivilent to if (this._customMeshSet) return;
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic

src/Gizmos/scaleGizmo.ts

@@ -41,6 +41,9 @@ export class ScaleGizmo extends Gizmo {
     private _uniformScalingMesh: Mesh;
     private _octahedron: Mesh;
     private _sensitivity: number = 1;
+    private _coloredMaterial: StandardMaterial;
+    private _hoverMaterial: StandardMaterial;
+    private _disableMaterial: StandardMaterial;
     private _observables: Nullable<Observer<PointerInfo>>[] = [];
 
     /** Gizmo state variables used for UI behavior */
@@ -124,15 +127,15 @@ export class ScaleGizmo extends Gizmo {
     }
 
     createUniformScaleMesh() {
-        const coloredMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
-        coloredMaterial.diffuseColor = Color3.Gray();
+        this._coloredMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
+        this._coloredMaterial.diffuseColor = Color3.Gray();
 
-        const hoverMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
-        hoverMaterial.diffuseColor = Color3.Yellow();
+        this._hoverMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
+        this._hoverMaterial.diffuseColor = Color3.Yellow();
 
-        const disableMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
-        disableMaterial.diffuseColor = Color3.Gray();
-        disableMaterial.alpha = 0.4;
+        this._disableMaterial = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
+        this._disableMaterial.diffuseColor = Color3.Gray();
+        this._disableMaterial.alpha = 0.4;
 
         const uniformScaleGizmo = new AxisScaleGizmo(new Vector3(0, 1, 0), Color3.Gray().scale(0.5), this.gizmoLayer, this);
         uniformScaleGizmo.updateGizmoRotationToMatchAttachedMesh = false;
@@ -159,9 +162,9 @@ export class ScaleGizmo extends Gizmo {
         });
 
         const cache = {
-            material: coloredMaterial,
-            hoverMaterial,
-            disableMaterial,
+            material: this._coloredMaterial,
+            hoverMaterial: this._hoverMaterial,
+            disableMaterial: this._disableMaterial,
             active: false
         };
 
@@ -241,9 +244,10 @@ export class ScaleGizmo extends Gizmo {
         this.gizmoAxisCache.set(mesh, cache);
     }
 
+    /**
+     * Subscribes to pointer up, down, and hover events. Used for responsive gizmos.
+     */
     public subscribeToPointerObserver(): void {
-        // Assumption, if user sets custom mesh, it will be disposed and pointerInfo will never hold reference to that mesh.
-        // Will be equivilent to if (this._customMeshSet) return;
         const pointerObserver = this.gizmoLayer.utilityLayerScene.onPointerObservable.add((pointerInfo) => {
             if (pointerInfo.pickInfo) {
                 // On Hover Logic
@@ -322,11 +326,15 @@ export class ScaleGizmo extends Gizmo {
         });
         this.onDragStartObservable.clear();
         this.onDragEndObservable.clear();
-
         [this._uniformScalingMesh, this._octahedron].forEach((msh) => {
             if (msh) {
                 msh.dispose();
             }
         });
+        [this._coloredMaterial, this._hoverMaterial, this._disableMaterial].forEach((matl) => {
+            if (matl) {
+                matl.dispose();
+            }
+        });
     }
 }