Merge pull request #5505 from TrevorDev/inspectorGizmos

Inspector gizmo features

dist/preview release/what's new.md

@@ -66,6 +66,7 @@
 - Make onscreen joystick's canvas public ([TrevorDev](https://github.com/TrevorDev))
 - Added `Tools.CustomRequestHeaders`, `Tools.UseCustomRequestHeaders`, `Tools.InjectCustomRequestHeaders` to send Custom Request Headers alongside XMLHttpRequest's i.e. when loading files (Tools.Loadfile) from resources requiring special headers like 'Authorization' ([susares](https://github.com/susares))
 - Added `.serialize` and `.Parse` functions in `ReflectionProbe` to retrieve reflection probes when parsing a previously serialized material ([julien-moreau](https://github.com/julien-moreau))
+- GizmoManager clearGizmoOnEmptyPointerEvent options and onAttachedToMeshObservable event ([TrevorDev](https://github.com/TrevorDev))
 ### glTF Loader
 
 - Added support for mesh instancing for improved performance when multiple nodes point to the same mesh ([bghgary](https://github.com/bghgary))

src/Debug/babylon.axesViewer.ts

@@ -7,14 +7,9 @@ module BABYLON.Debug {
      * The Axes viewer will show 3 axes in a specific point in space
      */
     export class AxesViewer {
-
-        private _xline = [Vector3.Zero(), Vector3.Zero()];
-        private _yline = [Vector3.Zero(), Vector3.Zero()];
-        private _zline = [Vector3.Zero(), Vector3.Zero()];
-
-        private _xmesh: Nullable<LinesMesh>;
-        private _ymesh: Nullable<LinesMesh>;
-        private _zmesh: Nullable<LinesMesh>;
+        private _xmesh: Nullable<AbstractMesh>;
+        private _ymesh: Nullable<AbstractMesh>;
+        private _zmesh: Nullable<AbstractMesh>;
 
         /**
          * Gets the hosting scene
@@ -26,17 +21,17 @@ module BABYLON.Debug {
         public scaleLines = 1;
 
         /** Gets the mesh used to render x-axis */
-        public get xAxisMesh(): Nullable<LinesMesh> {
+        public get xAxisMesh(): Nullable<AbstractMesh> {
             return this._xmesh;
         }
 
         /** Gets the mesh used to render x-axis */
-        public get yAxisMesh(): Nullable<LinesMesh> {
+        public get yAxisMesh(): Nullable<AbstractMesh> {
             return this._ymesh;
         }
 
         /** Gets the mesh used to render x-axis */
-        public get zAxisMesh(): Nullable<LinesMesh> {
+        public get zAxisMesh(): Nullable<AbstractMesh> {
             return this._zmesh;
         }
 
@@ -46,26 +41,37 @@ module BABYLON.Debug {
          * @param scaleLines defines a number used to scale line length (1 by default)
          */
         constructor(scene: Scene, scaleLines = 1) {
-
             this.scaleLines = scaleLines;
 
-            this._xmesh = Mesh.CreateLines("xline", this._xline, scene, true);
-            this._ymesh = Mesh.CreateLines("yline", this._yline, scene, true);
-            this._zmesh = Mesh.CreateLines("zline", this._zline, scene, true);
+            var greenColoredMaterial = new BABYLON.StandardMaterial("", scene);
+            greenColoredMaterial.disableLighting = true;
+            greenColoredMaterial.emissiveColor = BABYLON.Color3.Green().scale(0.5);
+
+            var redColoredMaterial = new BABYLON.StandardMaterial("", scene);
+            redColoredMaterial.disableLighting = true;
+            redColoredMaterial.emissiveColor = BABYLON.Color3.Red().scale(0.5);
+
+            var blueColoredMaterial = new BABYLON.StandardMaterial("", scene);
+            blueColoredMaterial.disableLighting = true;
+            blueColoredMaterial.emissiveColor = BABYLON.Color3.Blue().scale(0.5);
+
+            this._xmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, redColoredMaterial);
+            this._ymesh = BABYLON.AxisDragGizmo._CreateArrow(scene, greenColoredMaterial);
+            this._zmesh = BABYLON.AxisDragGizmo._CreateArrow(scene, blueColoredMaterial);
+
+            this._xmesh.rotationQuaternion = new BABYLON.Quaternion();
+            this._xmesh.scaling.scaleInPlace(4);
+            this._ymesh.rotationQuaternion = new BABYLON.Quaternion();
+            this._ymesh.scaling.scaleInPlace(4);
+            this._zmesh.rotationQuaternion = new BABYLON.Quaternion();
+            this._zmesh.scaling.scaleInPlace(4);
 
             this._xmesh.renderingGroupId = 2;
             this._ymesh.renderingGroupId = 2;
             this._zmesh.renderingGroupId = 2;
 
-            this._xmesh.material.checkReadyOnlyOnce = true;
-            this._xmesh.color = new Color3(1, 0, 0);
-            this._ymesh.material.checkReadyOnlyOnce = true;
-            this._ymesh.color = new Color3(0, 1, 0);
-            this._zmesh.material.checkReadyOnlyOnce = true;
-            this._zmesh.color = new Color3(0, 0, 1);
-
             this.scene = scene;
-
+            this.update(new BABYLON.Vector3(), Vector3.Right(), Vector3.Up(), Vector3.Forward());
         }
 
         /**
@@ -76,36 +82,27 @@ module BABYLON.Debug {
          * @param zaxis defines the z axis of the viewer
          */
         public update(position: Vector3, xaxis: Vector3, yaxis: Vector3, zaxis: Vector3): void {
-
-            var scaleLines = this.scaleLines;
-
             if (this._xmesh) {
                 this._xmesh.position.copyFrom(position);
+
+                var cross = Vector3.Cross(Vector3.Forward(), xaxis);
+                this._xmesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), xaxis));
+                this._xmesh.rotationQuaternion!.normalize();
             }
             if (this._ymesh) {
                 this._ymesh.position.copyFrom(position);
+
+                var cross = Vector3.Cross(Vector3.Forward(), yaxis);
+                this._ymesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), yaxis));
+                this._ymesh.rotationQuaternion!.normalize();
             }
             if (this._zmesh) {
                 this._zmesh.position.copyFrom(position);
-            }
 
-            var point2 = this._xline[1];
-            point2.x = xaxis.x * scaleLines;
-            point2.y = xaxis.y * scaleLines;
-            point2.z = xaxis.z * scaleLines;
-            Mesh.CreateLines("", this._xline, null, false, this._xmesh);
-
-            point2 = this._yline[1];
-            point2.x = yaxis.x * scaleLines;
-            point2.y = yaxis.y * scaleLines;
-            point2.z = yaxis.z * scaleLines;
-            Mesh.CreateLines("", this._yline, null, false, this._ymesh);
-
-            point2 = this._zline[1];
-            point2.x = zaxis.x * scaleLines;
-            point2.y = zaxis.y * scaleLines;
-            point2.z = zaxis.z * scaleLines;
-            Mesh.CreateLines("", this._zline, null, false, this._zmesh);
+                var cross = Vector3.Cross(Vector3.Forward(), zaxis);
+                this._zmesh.rotationQuaternion!.set(cross.x, cross.y, cross.z, 1 + Vector3.Dot(Vector3.Forward(), zaxis));
+                this._zmesh.rotationQuaternion!.normalize();
+            }
 
         }
 

src/Gizmos/babylon.axisDragGizmo.ts

@@ -17,6 +17,27 @@ module BABYLON {
          * * snapDistance is the the change in distance
          */
         public onSnapObservable = new Observable<{snapDistance: number}>();
+
+        /** @hidden */
+        public static _CreateArrow(scene: Scene, material: StandardMaterial) {
+            var arrow = new BABYLON.AbstractMesh("", scene);
+            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", {diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96}, scene);
+            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", {points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)]}, scene);
+            arrowTail.color = material.emissiveColor;
+            arrow.addChild(arrowMesh);
+            arrow.addChild(arrowTail);
+
+            // Position arrow pointing in its drag axis
+            arrowMesh.scaling.scaleInPlace(0.05);
+            arrowMesh.material = material;
+            arrowMesh.rotation.x = Math.PI / 2;
+            arrowMesh.position.z += 0.3;
+            arrowTail.scaling.scaleInPlace(0.26);
+            arrowTail.rotation.x = Math.PI / 2;
+            arrowTail.material = material;
+            return arrow;
+        }
+
         /**
          * Creates an AxisDragGizmo
          * @param gizmoLayer The utility layer the gizmo will be added to
@@ -36,21 +57,8 @@ module BABYLON {
             hoverMaterial.emissiveColor = color.add(new Color3(0.3, 0.3, 0.3));
 
             // Build mesh on root node
-            var arrow = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
-            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", {diameterTop: 0, height: 1.5, diameterBottom: 0.75, tessellation: 96}, gizmoLayer.utilityLayerScene);
-            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", {points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)]}, gizmoLayer.utilityLayerScene);
-            arrowTail.color = coloredMaterial.emissiveColor;
-            arrow.addChild(arrowMesh);
-            arrow.addChild(arrowTail);
+            var arrow = AxisDragGizmo._CreateArrow(gizmoLayer.utilityLayerScene, coloredMaterial);
 
-            // Position arrow pointing in its drag axis
-            arrowMesh.scaling.scaleInPlace(0.05);
-            arrowMesh.material = coloredMaterial;
-            arrowMesh.rotation.x = Math.PI / 2;
-            arrowMesh.position.z += 0.3;
-            arrowTail.scaling.scaleInPlace(0.26);
-            arrowTail.rotation.x = Math.PI / 2;
-            arrowTail.material = coloredMaterial;
             arrow.lookAt(this._rootMesh.position.subtract(dragAxis));
             arrow.scaling.scaleInPlace(1 / 3);
 

src/Gizmos/babylon.gizmoManager.ts

@@ -7,6 +7,10 @@ module BABYLON {
          * Gizmo's created by the gizmo manager, gizmo will be null until gizmo has been enabled for the first time
          */
         public gizmos: {positionGizmo: Nullable<PositionGizmo>, rotationGizmo: Nullable<RotationGizmo>, scaleGizmo: Nullable<ScaleGizmo>, boundingBoxGizmo: Nullable<BoundingBoxGizmo>};
+        /** When true, the gizmo will be detached from the current object when a pointer down occurs with an empty picked mesh */
+        public clearGizmoOnEmptyPointerEvent = false;
+        /** Fires an event when the manager is attached to a mesh */
+        public onAttachedToMeshObservable = new Observable<Nullable<AbstractMesh>>();
         private _gizmosEnabled = {positionGizmo: false, rotationGizmo: false, scaleGizmo: false, boundingBoxGizmo: false};
         private _pointerObserver: Nullable<Observer<PointerInfo>> = null;
         private _attachedMesh: Nullable<AbstractMesh> = null;
@@ -68,10 +72,14 @@ module BABYLON {
                                 this.attachToMesh(node);
                             }
                         } else {
-                            this.attachToMesh(null);
+                            if (this.clearGizmoOnEmptyPointerEvent) {
+                                this.attachToMesh(null);
+                            }
                         }
                     }else {
-                        this.attachToMesh(null);
+                        if (this.clearGizmoOnEmptyPointerEvent) {
+                            this.attachToMesh(null);
+                        }
                     }
                 }
             });
@@ -95,6 +103,7 @@ module BABYLON {
             if (this.boundingBoxGizmoEnabled && this._attachedMesh) {
                 this._attachedMesh.addBehavior(this.boundingBoxDragBehavior);
             }
+            this.onAttachedToMeshObservable.notifyObservers(mesh);
         }
 
         /**
@@ -180,6 +189,7 @@ module BABYLON {
             this._defaultKeepDepthUtilityLayer.dispose();
             this._defaultUtilityLayer.dispose();
             this.boundingBoxDragBehavior.detach();
+            this.onAttachedToMeshObservable.clear();
         }
     }
 }