Gizmo Meshes - increase rotation circle range / independant axis highlighting

src/Gizmos/axisDragGizmo.ts

@@ -40,6 +40,7 @@ export class AxisDragGizmo extends Gizmo {
     private _coloredMaterial: StandardMaterial;
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
+    private _dragging: boolean = false;
 
     /** @hidden */
     public static _CreateArrow(scene: Scene, material: StandardMaterial, thickness: number = 1, isCollider = false): TransformNode {
@@ -150,6 +151,8 @@ export class AxisDragGizmo extends Gizmo {
                 this._matrixChanged();
             }
         });
+        this.dragBehavior.onDragStartObservable.add(() => { this._dragging = true; });
+        this.dragBehavior.onDragEndObservable.add(() => { this._dragging = false; });
 
         var light = gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
@@ -170,7 +173,7 @@ export class AxisDragGizmo extends Gizmo {
             }
             this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
             if (!this._parent) {
-                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
+                var material = this._isHovered || this._dragging ? this._hoverMaterial : this._coloredMaterial;
                 cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                     if ((<LinesMesh>m).color) {

src/Gizmos/axisScaleGizmo.ts

@@ -49,6 +49,7 @@ export class AxisScaleGizmo extends Gizmo {
     private _coloredMaterial: StandardMaterial;
     private _hoverMaterial: StandardMaterial;
     private _disableMaterial: StandardMaterial;
+    private _dragging: boolean = false;
 
     /**
      * Creates an AxisScaleGizmo
@@ -103,6 +104,7 @@ export class AxisScaleGizmo extends Gizmo {
             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);
+            this._dragging = false;
         };
 
         // Add drag behavior to handle events when the gizmo is dragged
@@ -159,6 +161,7 @@ export class AxisScaleGizmo extends Gizmo {
             }
         });
         // On Drag Listener: to move gizmo mesh with user action
+        this.dragBehavior.onDragStartObservable.add(() => { this._dragging = true; });
         this.dragBehavior.onDragObservable.add((e) => increaseGizmoMesh(e.dragDistance));
         this.dragBehavior.onDragEndObservable.add(resetGizmoMesh);
 
@@ -182,7 +185,7 @@ export class AxisScaleGizmo extends Gizmo {
             }
             this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
             if (!this._parent) {
-                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
+                var material = this._isHovered || this._dragging ? this._hoverMaterial : this._coloredMaterial;
                 cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                     if ((<LinesMesh>m).color) {

src/Gizmos/planeDragGizmo.ts

@@ -39,6 +39,7 @@ export class PlaneDragGizmo extends Gizmo {
 
     private _isEnabled: boolean = false;
     private _parent: Nullable<PositionGizmo> = null;
+    private _dragging: boolean = false;
 
     /** @hidden */
     public static _CreatePlane(scene: Scene, material: StandardMaterial): TransformNode {
@@ -111,6 +112,8 @@ export class PlaneDragGizmo extends Gizmo {
                 this._matrixChanged();
             }
         });
+        this.dragBehavior.onDragStartObservable.add(() => { this._dragging = true; });
+        this.dragBehavior.onDragEndObservable.add(() => { this._dragging = false; });
 
         var light = gizmoLayer._getSharedGizmoLight();
         light.includedOnlyMeshes = light.includedOnlyMeshes.concat(this._rootMesh.getChildMeshes(false));
@@ -131,7 +134,7 @@ export class PlaneDragGizmo extends Gizmo {
             }
             this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
             if (!this._parent) {
-                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
+                var material = this._isHovered || this._dragging ? this._hoverMaterial : this._coloredMaterial;
                 cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                 });

src/Gizmos/planeRotationGizmo.ts

@@ -41,11 +41,13 @@ export class PlaneRotationGizmo extends Gizmo {
     private _disableMaterial: StandardMaterial;
     private _gizmoMesh: Mesh;
     private _rotationCircle: Mesh;
+    private _dragging: boolean = false;
 
     private static _CircleConstants = {
         radius: 0.3,
         pi2: Math.PI * 2,
-        tessellation: 360
+        tessellation: 70,
+        rotationCircleRange: 4
     };
 
     /**
@@ -118,6 +120,7 @@ export class PlaneRotationGizmo extends Gizmo {
                 const angle = Vector3.GetAngleBetweenVectors(originalRotationPoint.subtract(origin), dragStartPoint.subtract(origin), this._rotationCircle.up);
 
                 this._rotationCircle.addRotation(0, angle, 0);
+                this._dragging = true;
             }
         });
 
@@ -125,6 +128,7 @@ export class PlaneRotationGizmo extends Gizmo {
             dragDistance = 0;
             this.updateRotationCircle(this._rotationCircle, rotationCirclePaths, dragDistance, dragPlanePoint);
             this._gizmoMesh.addChild(this._rotationCircle);    // Add rotation circle back to parent mesh after drag behavior
+            this._dragging = false;
         });
 
         var tmpSnapEvent = { snapDistance: 0 };
@@ -234,7 +238,7 @@ export class PlaneRotationGizmo extends Gizmo {
             }
             this._isHovered = !!(cache.colliderMeshes.indexOf(<Mesh>pointerInfo?.pickInfo?.pickedMesh) != -1);
             if (!this._parent) {
-                var material = this._isHovered ? this._hoverMaterial : this._coloredMaterial;
+                var material = this._isHovered || this._dragging ? this._hoverMaterial : this._coloredMaterial;
                 cache.gizmoMeshes.forEach((m: Mesh) => {
                     m.material = material;
                     if ((<LinesMesh>m).color) {
@@ -272,7 +276,7 @@ export class PlaneRotationGizmo extends Gizmo {
         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 < PlaneRotationGizmo._CircleConstants.pi2; i += step) {
+            for (let i = 0; i < PlaneRotationGizmo._CircleConstants.pi2 * PlaneRotationGizmo._CircleConstants.rotationCircleRange + 0.01; i += step) {
                 if (i < fillRadians) {
                     const x = PlaneRotationGizmo._CircleConstants.radius * Math.sin(i) * Math.cos(p);
                     const z = PlaneRotationGizmo._CircleConstants.radius * Math.cos(i) * Math.cos(p);
@@ -285,6 +289,7 @@ export class PlaneRotationGizmo extends Gizmo {
 
             paths.push(path);
         }
+        console.log(paths);
 
         const mat = new StandardMaterial("", this.gizmoLayer.utilityLayerScene);
         mat.diffuseColor = Color3.Yellow();
@@ -305,7 +310,7 @@ export class PlaneRotationGizmo extends Gizmo {
             const path = pathArr[tessellationCounter];
             if (path) {
                 let radianCounter = 0;
-                for (let i = 0; i < PlaneRotationGizmo._CircleConstants.pi2; i += step) {
+                for (let i = 0; i < PlaneRotationGizmo._CircleConstants.pi2 * PlaneRotationGizmo._CircleConstants.rotationCircleRange + 0.01; i += step) {
                     if (path[radianCounter]) {
                         if (i < Math.abs(newFill)) {
                             const absI = (newFill > 0) ? i : i * -1;