use cylinders instead of lines

dist/preview release/what's new.md

@@ -228,6 +228,7 @@
 - Add option to disable gazeTracker color changes in vrExperienceHelper ([TrevorDev](https://github.com/TrevorDev))
 - PointerDragBehavior validateDrag predicate to stop dragging to specific points ([TrevorDev](https://github.com/TrevorDev))
 - Auto Update Touch Action [#5674](https://github.com/BabylonJS/Babylon.js/issues/5674)([Sebavan](https://github.com/Sebavan))
+- Add hemispheric lighting to gizmos to avoid flat look ([TrevorDev](https://github.com/TrevorDev))
 
 ### Viewer
 

src/Gizmos/axisDragGizmo.ts

@@ -7,7 +7,6 @@ import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Mesh } from "../Meshes/mesh";
 import { LinesMesh } from "../Meshes/linesMesh";
 import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
-import { LinesBuilder } from "../Meshes/Builders/linesBuilder";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
 import { _TimeToken } from "../Instrumentation/timeToken";
 import { _DepthCullingState, _StencilState, _AlphaState } from "../States/index";
@@ -38,8 +37,8 @@ export class AxisDragGizmo extends Gizmo {
     public static _CreateArrow(scene: Scene, material: StandardMaterial): TransformNode {
         var arrow = new TransformNode("arrow", scene);
         var cylinder = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0, height: 0.075, diameterBottom: 0.0375, tessellation: 96 }, scene);
-        var line = LinesBuilder.CreateLines("line", { points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)] }, scene);
-        line.color = material.diffuseColor;
+        var line = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0.005, height: 0.275, diameterBottom: 0.005, tessellation: 96 }, scene);
+        line.material = material;
         cylinder.parent = arrow;
         line.parent = arrow;
 
@@ -47,7 +46,7 @@ export class AxisDragGizmo extends Gizmo {
         cylinder.material = material;
         cylinder.rotation.x = Math.PI / 2;
         cylinder.position.z += 0.3;
-        line.scaling.scaleInPlace(0.26);
+        line.position.z += 0.275 / 2;
         line.rotation.x = Math.PI / 2;
         return arrow;
     }

src/Gizmos/axisScaleGizmo.ts

@@ -6,7 +6,7 @@ import { AbstractMesh } from "../Meshes/abstractMesh";
 import { Mesh } from "../Meshes/mesh";
 import { LinesMesh } from "../Meshes/linesMesh";
 import { BoxBuilder } from "../Meshes/Builders/boxBuilder";
-import { LinesBuilder } from "../Meshes/Builders/linesBuilder";
+import { CylinderBuilder } from "../Meshes/Builders/cylinderBuilder";
 import { StandardMaterial } from "../Materials/standardMaterial";
 import { PointerDragBehavior } from "../Behaviors/Meshes/pointerDragBehavior";
 import { _TimeToken } from "../Instrumentation/timeToken";
@@ -56,8 +56,7 @@ export class AxisScaleGizmo extends Gizmo {
         // Build mesh on root node
         var arrow = new AbstractMesh("", gizmoLayer.utilityLayerScene);
         var arrowMesh = BoxBuilder.CreateBox("yPosMesh", { size: 0.4 }, gizmoLayer.utilityLayerScene);
-        var arrowTail = LinesBuilder.CreateLines("yPosMesh", { points: [new Vector3(0, 0, 0), new Vector3(0, 1.1, 0)] }, gizmoLayer.utilityLayerScene);
-        arrowTail.color = this._coloredMaterial.diffuseColor;
+        var arrowTail = CylinderBuilder.CreateCylinder("cylinder", { diameterTop: 0.005, height: 0.275, diameterBottom: 0.005, tessellation: 96 }, gizmoLayer.utilityLayerScene);
         arrow.addChild(arrowMesh);
         arrow.addChild(arrowTail);
 
@@ -66,7 +65,7 @@ export class AxisScaleGizmo extends Gizmo {
         arrowMesh.material = this._coloredMaterial;
         arrowMesh.rotation.x = Math.PI / 2;
         arrowMesh.position.z += 0.3;
-        arrowTail.scaling.scaleInPlace(0.26);
+        arrowTail.position.z += 0.275 / 2;
         arrowTail.rotation.x = Math.PI / 2;
         arrow.lookAt(this._rootMesh.position.add(dragAxis));
         this._rootMesh.addChild(arrow);

src/Gizmos/gizmoManager.ts

@@ -184,6 +184,9 @@ export class GizmoManager implements IDisposable {
                 this._attachedMesh.addBehavior(this.boundingBoxDragBehavior);
             }
         } else if (this.gizmos.boundingBoxGizmo) {
+            if (this._attachedMesh) {
+                this._attachedMesh.removeBehavior(this.boundingBoxDragBehavior);
+            }
             this.gizmos.boundingBoxGizmo.attachedMesh = null;
         }
         this._gizmosEnabled.boundingBoxGizmo = value;

src/Gizmos/planeRotationGizmo.ts

@@ -55,20 +55,16 @@ export class PlaneRotationGizmo extends Gizmo {
         // Build mesh on root node
         var parentMesh = new AbstractMesh("", gizmoLayer.utilityLayerScene);
 
-        // Create circle out of lines
-        var radius = 0.8;
-        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.diffuseColor;
+        let drag = Mesh.CreateTorus("", 0.6, 0.03, tessellation, gizmoLayer.utilityLayerScene);
+        drag.visibility = 0;
+        let rotationMesh = Mesh.CreateTorus("", 0.6, 0.005, tessellation, gizmoLayer.utilityLayerScene);
+        rotationMesh.material = coloredMaterial;
 
         // Position arrow pointing in its drag axis
-        rotationMesh.scaling.scaleInPlace(0.26);
         rotationMesh.rotation.x = Math.PI / 2;
+        drag.rotation.x = Math.PI / 2;
         parentMesh.addChild(rotationMesh);
+        parentMesh.addChild(drag);
         parentMesh.lookAt(this._rootMesh.position.add(planeNormal));
 
         this._rootMesh.addChild(parentMesh);