Scale gizmo on my own

Hello everyone!

I came into this playground: https://playground.babylonjs.com/#EBPQH9#51
There’s an orthographic mode + scroll.

I added gizmo to it and it’s very big. Is there any way to scale the gizmo on my own? So when I scroll in this mode gizmo will be bigger/smaller depends on the scroll value.

I kinda made it but I’m not sure if it’s the best approach

https://playground.babylonjs.com/#EBPQH9#56 (lines 16-22)

I’m wondering if it gonna works so smooth when I’ll have much more gizmos on my scene.

You can use gizmo.scaleRatio (default is one). Set a lower value like 0.1 and see it it fits your needs.

Orthographic zoom demo | Babylon.js Playground

Thanks, gizmo.scaleRatio looks much better than gizmo.xGizmo._rootMesh.getChildren()[0].scaling.set(gizmoScaling, gizmoScaling, gizmoScaling).

Please correct me if I’m wrong but I think scaleRatio doesn’t work on gizmoManager https://playground.babylonjs.com/#4TBMBR#62 ← this playground doesn’t work after adding scale ratio for eq. position gizmo

Let me take a look.

PR for scaleRatio : Exposed `scaleRatio` for GizmoManager by CedricGuillemet · Pull Request #10060 · BabylonJS/Babylon.js · GitHub

Gizmomanager creation had a breaking change since 4.2
Now create one this way:

var gizmoManager = new BABYLON.GizmoManager(scene, 1, new BABYLON.UtilityLayerRenderer(scene), new BABYLON.UtilityLayerRenderer(scene));
1 Like

Thanks, that’s very helpful. I switched to version 4.2.0-beta.16 so I’ve got those extra arguments in GizmoManager in my app. I’m wondering if there’s a method/property so I could get all GizmoManagers from the scene and filter ones I need to use. Or does GizmoManager have id or something that I could get it from the scene?

Do you really need multiple gizmo manager? If so, you can keep a list of managers when you create a new one.

@Cedric Ye, I think that’s easier for me to manage multiple meshes and components made out of them.

I was thinking about extending GizmoManager class and add to it uniqe id. But still I wont have list of gizmoManagers in my scene. So I’ll have to extend scene class by gizmoManager list.

@Cedric, actually I’ve got a question about gizmoManagers. I think the main reason why I’m creating many gizmoManagers it’s because I want different dragBehaviors on specific meshes.

Can we, in babylon, somehow distinguish different dragBehavior on the same gizmo (for the same gizmo, eq. yPlane)?

I made this playground for an example https://playground.babylonjs.com/#4YM59Z#1
it’s no matter to which sphere gizmo is attached, it will always console.log(“sphere 1 drag behavior”). I know I could make global variable and change it in the gizmoManager.onAttachedToMeshObservable and then add some if's or switch in the onDragObservable but I guess that’s not the point. Or is it? :smiley:
I think it would be great if there was info about mesh the that’s being dragged, in the callback function

You can try to attach your logic to onAttachedToMeshObservableSearch

Depending on the mesh, you switch the gizmo properties.

1 Like