minor gizmo style change and ability to change gizmo's scale

dist/preview release/what's new.md

@@ -8,7 +8,7 @@
   - New GUI control: [Grid](http://doc.babylonjs.com/how_to/gui#grid) ([Deltakosh](https://github.com/deltakosh))
   - New GUI control: [InputPassword](https://doc.babylonjs.com/how_to/gui#inputpassword) ([theom](https://github.com/theom))
 - Gizmo Support ([TrevorDev](https://github.com/TrevorDev))
-  - 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))
   - Added attachToBoxBehavior to attach UI to a bounding box ([TrevorDev](https://github.com/TrevorDev))
   - Gizmo manager's internal gizmos are now public ([TrevorDev](https://github.com/TrevorDev))

src/Gizmos/babylon.axisDragGizmo.ts

@@ -33,12 +33,12 @@ module BABYLON {
 
             var hoverMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             hoverMaterial.disableLighting = true;
-            hoverMaterial.emissiveColor = color.add(new Color3(0.2,0.2,0.2));
+            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.5, 0)]}, 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);
@@ -48,10 +48,11 @@ module BABYLON {
             arrowMesh.material = coloredMaterial;
             arrowMesh.rotation.x = Math.PI/2;
             arrowMesh.position.z+=0.3;
-            arrowTail.scaling.scaleInPlace(0.2);
+            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);
 
             this._rootMesh.addChild(arrow);
 

src/Gizmos/babylon.axisScaleGizmo.ts

@@ -38,12 +38,12 @@ module BABYLON {
 
             var hoverMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             hoverMaterial.disableLighting = true;
-            hoverMaterial.emissiveColor = color.add(new Color3(0.2,0.2,0.2));
+            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.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);
+            var arrowTail = BABYLON.MeshBuilder.CreateLines("yPosMesh", {points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)]}, gizmoLayer.utilityLayerScene);
             arrowTail.color = this._coloredMaterial.emissiveColor;
             arrow.addChild(arrowMesh);
             arrow.addChild(arrowTail);
@@ -53,11 +53,12 @@ module BABYLON {
             arrowMesh.material = this._coloredMaterial;
             arrowMesh.rotation.x = Math.PI/2;
             arrowMesh.position.z+=0.3;
-            arrowTail.scaling.scaleInPlace(0.2);
+            arrowTail.scaling.scaleInPlace(0.26);
             arrowTail.rotation.x = Math.PI/2;
             arrowTail.material = this._coloredMaterial;
             arrow.lookAt(this._rootMesh.position.subtract(dragAxis));
             this._rootMesh.addChild(arrow);
+            arrow.scaling.scaleInPlace(1/3);
 
             // Add drag behavior to handle events when the gizmo is dragged
             this.dragBehavior = new PointerDragBehavior({dragAxis: dragAxis});

src/Gizmos/babylon.boundingBoxGizmo.ts

@@ -75,7 +75,7 @@ module BABYLON {
             coloredMaterial.emissiveColor = color;
             var hoverColoredMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             hoverColoredMaterial.disableLighting = true;
-            hoverColoredMaterial.emissiveColor = color.clone().add(new Color3(0.2, 0.2, 0.2));
+            hoverColoredMaterial.emissiveColor = color.clone().add(new Color3(0.3, 0.3, 0.3));
 
             // Build bounding box out of lines
             this._lineBoundingBox = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);

src/Gizmos/babylon.gizmo.ts

@@ -8,7 +8,10 @@ module BABYLON {
          */
         protected _rootMesh:Mesh;
         private _attachedMesh:Nullable<AbstractMesh>;
-        private _scaleFactor = 3;
+        /**
+         * Ratio for the scale of the gizmo (Default: 1)
+         */
+        public scaleRatio = 1;
         private _tmpMatrix = new Matrix();
         /**
          * If a custom mesh has been set (Default: false)
@@ -113,7 +116,7 @@ module BABYLON {
                         cameraPosition = (<WebVRFreeCamera>this.gizmoLayer.utilityLayerScene.activeCamera).devicePosition;
                     }
                     this._rootMesh.position.subtractToRef(cameraPosition, this._tempVector);
-                    var dist = this._tempVector.length()/this._scaleFactor;
+                    var dist = this._tempVector.length()*this.scaleRatio;
                     this._rootMesh.scaling.set(dist, dist, dist);
                 }
             }

src/Gizmos/babylon.planeRotationGizmo.ts

@@ -35,14 +35,14 @@ module BABYLON {
             
             var hoverMaterial = new BABYLON.StandardMaterial("", gizmoLayer.utilityLayerScene);
             hoverMaterial.disableLighting = true;
-            hoverMaterial.emissiveColor = color.add(new Color3(0.2,0.2,0.2));
+            hoverMaterial.emissiveColor = color.add(new Color3(0.3,0.3,0.3));
 
             // Build mesh on root node
             var parentMesh = new BABYLON.AbstractMesh("", gizmoLayer.utilityLayerScene);
 
             // Create circle out of lines
             var tessellation = 20;
-            var radius = 2;
+            var radius = 0.8;
             var points = new Array<Vector3>();
             for(var i = 0;i < tessellation;i++){
                 var radian = (2*Math.PI) * (i/(tessellation-1));
@@ -52,13 +52,14 @@ module BABYLON {
             rotationMesh.color = coloredMaterial.emissiveColor;
             
             // Position arrow pointing in its drag axis
-            rotationMesh.scaling.scaleInPlace(0.1);
+            rotationMesh.scaling.scaleInPlace(0.26);
             rotationMesh.material = coloredMaterial;
             rotationMesh.rotation.x = Math.PI/2;
             parentMesh.addChild(rotationMesh);
             parentMesh.lookAt(this._rootMesh.position.subtract(planeNormal));
             
             this._rootMesh.addChild(parentMesh);
+            parentMesh.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;

src/Gizmos/babylon.positionGizmo.ts

@@ -59,6 +59,20 @@ module BABYLON {
         public get snapDistance(){
             return this.xGizmo.snapDistance;
         }
+
+        /**
+         * Ratio for the scale of the gizmo (Default: 1)
+         */
+        public set scaleRatio(value:number){
+            if(this.xGizmo){
+                this.xGizmo.scaleRatio = value;
+                this.yGizmo.scaleRatio = value;
+                this.zGizmo.scaleRatio = value;
+            }
+        }
+        public get scaleRatio(){
+            return this.xGizmo.scaleRatio;
+        }
         
         /**
          * Disposes of the gizmo

src/Gizmos/babylon.rotationGizmo.ts

@@ -61,6 +61,20 @@ module BABYLON {
         }
 
         /**
+         * Ratio for the scale of the gizmo (Default: 1)
+         */
+        public set scaleRatio(value:number){
+            if(this.xGizmo){
+                this.xGizmo.scaleRatio = value;
+                this.yGizmo.scaleRatio = value;
+                this.zGizmo.scaleRatio = value;
+            }
+        }
+        public get scaleRatio(){
+            return this.xGizmo.scaleRatio;
+        }
+
+        /**
          * Disposes of the gizmo
          */
         public dispose(){

src/Gizmos/babylon.scaleGizmo.ts

@@ -45,7 +45,7 @@ module BABYLON {
             this._uniformGizmo.updateGizmoRotationToMatchAttachedMesh = false;
             this._uniformGizmo.uniformScaling = true
             var octahedron = BABYLON.Mesh.CreatePolyhedron("", {type: 1}, this._uniformGizmo.gizmoLayer.utilityLayerScene);
-            octahedron.scaling.scaleInPlace(0.02);
+            octahedron.scaling.scaleInPlace(0.007);
             this._uniformGizmo.setCustomMesh(octahedron, true);
             
             this.attachedMesh = null;
@@ -78,6 +78,21 @@ module BABYLON {
         }
 
         /**
+         * Ratio for the scale of the gizmo (Default: 1)
+         */
+        public set scaleRatio(value:number){
+            if(this.xGizmo){
+                this.xGizmo.scaleRatio = value;
+                this.yGizmo.scaleRatio = value;
+                this.zGizmo.scaleRatio = value;
+                this._uniformGizmo.scaleRatio = value;
+            }
+        }
+        public get scaleRatio(){
+            return this.xGizmo.scaleRatio;
+        }
+
+        /**
          * Disposes of the gizmo
          */
         public dispose(){