PositionGizmo scaling on camera move (Gizmo)

Questions
1

Hello!

When the camera is too far away, the sphere becomes small. I would like the gizmo to become small as well. I tried updateScale = false, but apparently this property is not needed for this

https://playground.babylonjs.com/#31M2AP#244

2

You need to use gizmo.scaleRatio - example: https://playground.babylonjs.com/#31M2AP#245
Put it into the render loop and make proportional with a camera distance from the mesh.

2 Likes
3

Hey there! For future references I implemented Labris’s solution.

And here is the formula I came up with for the render loop. I get the distance from the camera to the mesh and scale it so that as the distance gets, bigger the gizmo scale will get smaller. 1/ (distance -1) was the way to go :blush: .

engine.runRenderLoop(() => {
    const diff = new BABYLON.Vector3(camera.position.x - sphere.position.x,
    camera.position.y- sphere.position.y,
    camera.position.z - sphere.position.z);
    
    const distance = diff.length();
    if(distance !== 1) {
        gizmo.scaleRatio = 10 * 1 / (distance - 1);
    }
    console.log(distance);
});
3 Likes
4

I think it would be more correct to use observable here since it is easier to remove it later in case of need - https://playground.babylonjs.com/#31M2AP#252
And here, for future reference, the same snippet with ArcRotate camera - https://playground.babylonjs.com/#31M2AP#253

4 Likes
5

Wow! Many thanks for the help!
This formula is exactly what I need. A very smart decision with an observer. This is what I want to use.