Merge pull request #4768 from TrevorDev/gizmoApearence

Gizmo appearance

dist/preview release/what's new.md

@@ -7,7 +7,7 @@
 - New GUI 3D controls toolset. [Complete doc + demos](http://doc.babylonjs.com/how_to/gui3d) ([Deltakosh](https://github.com/deltakosh))
 - Added [Environment Texture Tools](https://doc.babylonjs.com/how_to/physically_based_rendering#creating-a-compressed-environment-texture) to reduce the size of the usual .DDS file ([sebavan](http://www.github.com/sebavan))
 - New GUI control: the [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
-- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, rotation, scale and bounding box. [Doc](http://doc.babylonjs.com/how_to/gizmo) ([TrevorDev](https://github.com/TrevorDev))
+- Gizmo and GizmoManager classes used to manipulate meshes in a scene. Gizmo types include: position, scale, rotation and bounding box. [Doc](http://doc.babylonjs.com/how_to/gizmo) ([TrevorDev](https://github.com/TrevorDev))
 - New behaviors: PointerDragBehavior, SixDofDragBehavior and MultiPointerScaleBehavior to enable smooth drag and drop/scaling with mouse or 6dof controller on a mesh. [Doc](http://doc.babylonjs.com/how_to/meshbehavior) ([TrevorDev](https://github.com/TrevorDev))
 - Particle system improvements ([Deltakosh](https://github.com/deltakosh))
   - Added a ParticleHelper class to create some pre-configured particle systems in a one-liner method style. [Doc](https://doc.babylonjs.com/How_To/ParticleHelper) ([Deltakosh](https://github.com/deltakosh)) / ([DevChris](https://github.com/yovanoc))

src/Gizmos/babylon.axisDragGizmo.ts

@@ -37,8 +37,9 @@ module BABYLON {
 
             // Build mesh on root node
             var arrow = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
-            var arrowMesh = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", {diameterTop:0, height: 2, tessellation: 96}, gizmoLayer.utilityLayerScene);
-            var arrowTail = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", {diameter:0.015, height: 0.3, tessellation: 96}, 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.5, 0)]}, gizmoLayer.utilityLayerScene);
+            arrowTail.color = coloredMaterial.emissiveColor;
             arrow.addChild(arrowMesh);
             arrow.addChild(arrowTail);
 
@@ -47,9 +48,9 @@ module BABYLON {
             arrowMesh.material = coloredMaterial;
             arrowMesh.rotation.x = Math.PI/2;
             arrowMesh.position.z+=0.3;
+            arrowTail.scaling.scaleInPlace(0.2);
             arrowTail.rotation.x = Math.PI/2;
             arrowTail.material = coloredMaterial;
-            arrowTail.position.z+=0.15;
             arrow.lookAt(this._rootMesh.position.subtract(dragAxis));
 
             this._rootMesh.addChild(arrow)
@@ -85,15 +86,14 @@ module BABYLON {
                 if(this._customMeshSet){
                     return;
                 }
-                if(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1)){
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = hoverMaterial;
-                    });
-                }else{
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = coloredMaterial;
-                    });
-                }
+                var isHovered = pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1);
+                var material = isHovered ? hoverMaterial : coloredMaterial;
+                this._rootMesh.getChildMeshes().forEach((m)=>{
+                    m.material = material;
+                    if((<LinesMesh>m).color){
+                        (<LinesMesh>m).color = material.emissiveColor
+                    }
+                });
             });
         }
         protected _attachedMeshChanged(value:Nullable<AbstractMesh>){

src/Gizmos/babylon.axisScaleGizmo.ts

@@ -37,8 +37,9 @@ module BABYLON {
 
             // Build mesh on root node
             var arrow = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene)
-            var arrowMesh = BABYLON.MeshBuilder.CreateBox("yPosMesh", {size: 0.5}, gizmoLayer.utilityLayerScene);
-            var arrowTail = BABYLON.MeshBuilder.CreateCylinder("yPosMesh", {diameter:0.015, height: 0.3, tessellation: 96}, gizmoLayer.utilityLayerScene);
+            var arrowMesh = BABYLON.MeshBuilder.CreateBox("yPosMesh", {size: 0.4}, gizmoLayer.utilityLayerScene);
+            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", {points: [new Vector3(0, 0, 0), new Vector3(0, 1.5, 0)]}, gizmoLayer.utilityLayerScene);
+            arrowTail.color = coloredMaterial.emissiveColor;
             arrow.addChild(arrowMesh);
             arrow.addChild(arrowTail);
 
@@ -47,9 +48,9 @@ module BABYLON {
             arrowMesh.material = coloredMaterial;
             arrowMesh.rotation.x = Math.PI/2;
             arrowMesh.position.z+=0.3;
+            arrowTail.scaling.scaleInPlace(0.2);
             arrowTail.rotation.x = Math.PI/2;
             arrowTail.material = coloredMaterial;
-            arrowTail.position.z+=0.15;
             arrow.lookAt(this._rootMesh.position.subtract(dragAxis));
             this._rootMesh.addChild(arrow);
 
@@ -93,15 +94,14 @@ module BABYLON {
                 if(this._customMeshSet){
                     return;
                 }
-                if(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1)){
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = hoverMaterial;
-                    });
-                }else{
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = coloredMaterial;
-                    });
-                }
+                var isHovered = pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1);
+                var material = isHovered ? hoverMaterial : coloredMaterial;
+                this._rootMesh.getChildMeshes().forEach((m)=>{
+                    m.material = material;
+                    if((<LinesMesh>m).color){
+                        (<LinesMesh>m).color = material.emissiveColor
+                    }
+                });
             });
         }
         

src/Gizmos/babylon.gizmoManager.ts

@@ -163,6 +163,7 @@ module BABYLON {
                     gizmo.dispose();
                 }
             }
+            this._dragBehavior.detach();
             this._gizmoLayer.dispose();
         }
     }

src/Gizmos/babylon.planeRotationGizmo.ts

@@ -39,7 +39,17 @@ module BABYLON {
 
             // Build mesh on root node
             var parentMesh = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
-            var rotationMesh = BABYLON.Mesh.CreateTorus("torus", 3, 0.15, 20, gizmoLayer.utilityLayerScene, false);
+
+            // Create circle out of lines
+            var tessellation = 20;
+            var radius = 2;
+            var points = new Array<Vector3>();
+            for(var i = 0;i < tessellation;i++){
+                var radian = (2*Math.PI) * (i/(tessellation-1));
+                points.push(new Vector3(radius*Math.sin(radian), 0, radius*Math.cos(radian)));
+            }
+            let rotationMesh = Mesh.CreateLines("", points, gizmoLayer.utilityLayerScene);
+            rotationMesh.color = coloredMaterial.emissiveColor;
             
             // Position arrow pointing in its drag axis
             rotationMesh.scaling.scaleInPlace(0.1);
@@ -136,15 +146,14 @@ module BABYLON {
                 if(this._customMeshSet){
                     return;
                 }
-                if(pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1)){
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = hoverMaterial;
-                    });
-                }else{
-                    this._rootMesh.getChildMeshes().forEach((m)=>{
-                        m.material = coloredMaterial;
-                    });
-                }
+                var isHovered = pointerInfo.pickInfo && (this._rootMesh.getChildMeshes().indexOf(<Mesh>pointerInfo.pickInfo.pickedMesh) != -1);
+                var material = isHovered ? hoverMaterial : coloredMaterial;
+                this._rootMesh.getChildMeshes().forEach((m)=>{
+                    m.material = material;
+                    if((<LinesMesh>m).color){
+                        (<LinesMesh>m).color = material.emissiveColor
+                    }
+                });
             });
         }