Problem with Bounding Box Gizmo

Questions
1

Hi everyone, I hope you all are well!

I’m facing a strange issue using the gizmo manager and the bounding box gizmo. When I enable it, it shows only the box, but not the controls to scale, etc, as you can see in the following video:

I’m using BabylonJS 5.57.1, and the code to enable the gizmo is as simple as:

this.gizmoManager.boundingBoxGizmoEnabled = true;

I’m also following this playground here:

I also tried the following options without success:

const utilityLayer = new BABYLON.UtilityLayerRenderer(this.scene);
this.gizmoManager.gizmos.boundingBoxGizmo.utilityLayer = utilityLayer;

this.gizmoManager.gizmos.boundingBoxGizmo.setEnabledScaling(true);
2

5.57.1 is pretty old, but it doesn’t seem like the issue repros even in an old Playground:

I assume you are not able to repro this in any Playground?

@Cedric

2 Likes
3

Hi @ryantrem, thank you for responding. I tried upgrading to Babylon 7.43, but the issue persists. I tried to reproduce the issue on Playground, but without success (I’m basically doing the same as the Playground).

image
image1645×833 118 KB

4

Try something like that. This should work

const utilityLayer = new BABYLON.UtilityLayerRenderer(this.scene);
utilityLayer.setRenderCamera(this.scene.activeCameras[0]);
utilityLayer.utilityLayerScene.autoClearDepthAndStencil = false;

this.boundingBoxGizmo = new BABYLON.BoundingBoxGizmo(BABYLON.Color3.FromHexString("#0984e3"), utilityLayer);    
this.boundingBoxGizmo.attachedMesh = meshToAttach;
1 Like
5

Do you use ES6-tree shaking? Maybe you missed some import? But I think in this case it will not work at all :smiley:

1 Like
6

Hi everyone,

@Dad72 @Lemcat thank you for responding

I just noticed that the problem is not that the controls are not appearing, but that they are very small.

image
image1175×827 53.6 KB

I managed to reproduce this in a Playground. It seems the problem is my scene scaling (objects are big, and the camera is far from the scene center):

Is there any way to keep the size of the controls, even if my camera is far from the object and the object is big, like in this playground?

EDIT: I just found the solution in the docs: Babylon.js docs

Unfortunately, scaling all the objects and scenes would be very difficult. Hundreds of models are in an application about 6 years old, with dozens of thousands of scene data saved to a database, etc.

So, if there is any way to increase the controls directly in the code, that would be extremely useful.

Thanks in advance for everyone’s help!

7

I just found this on the API docs, sorry for bothering you all:

this.gizmoManager.gizmos.boundingBoxGizmo.scaleBoxSize = 10;
4 Likes