Need to hide/show gizmo1 and replace model

Questions
, ,
1

Hi I want to hide/show gizmo have any idea about that
here is my code-
gizmo = new BABYLON.BoundingBoxGizmo(BABYLON.Color3.FromHexString("#768787"), utilLayer);

1 Like
2

Hey there, you can set the attachedMesh property to whichever mesh you want to control. Then to hide the gizmo, just set attachedMesh to null. :slightly_smiling_face:

https://playground.babylonjs.com/#YYYCPV

2 Likes
3

Hey @Paritosh_Mishra I thought I’d go more in depth with this question and try to give you a full tutorial around how to do this. :slight_smile:

Here is a demo I made: https://playground.babylonjs.com/#YXBZN9#1

First we created our gizmo like normal and attached it to our mesh. In the demo I made I make the gizmo invisible when we click off our main mesh. To do this I cast a ray on scene.onPointerDown (line 64)

var ray = scene.createPickingRay(scene.pointerX, scene.pointerY, BABYLON.Matrix.Identity(), scene.activeCamera);
var hit = scene.pickWithRay(ray);
if (hit.pickedMesh!= null && hit.pickedMesh.id =="mesh"){
   gizmo.attachedMesh = mesh;
}
else {
   gizmo.attachedMesh = null;
}

To make the gizmo enabled and disabled we are going to do what Blake suggested and set
gizmo.attachedMesh = null; (line 72)

Granted you can do some of this automatically with the gizmo manager and I highly recommend reading more about it here: Gizmos | Babylon.js Documentation

Finally we wanted to replace our mesh. The way I figured to do this was just dispose the current one and replace it with a new one. Keep in mind we want to save the position of what we already had so I quickly saved it off before disposing the original mesh and then reset the position after creating the new mesh. (line 47 and line 56).

Let me know if you have any questions about any of this!

4 Likes