Angle and distance on gizmo translations

Questions
1

Hey folks, is it possible to show with a text element the angle of gizmo rotation or gizmo translation indicating the distance?

2

@Cedric might be able to help with where to find the data ?

On the other hand, you could rely on the babylon GUI to display the info.

3

There is an accessor to retrieve angle from a PlaneRotationGizmo :

For Translation, as it depends on what the user wants to know (distance, delta translation on 1 or more axis ,…) it’s left to the user to cumulate the event.delta in the onDragObservable.

Once you have these values, you can add a GUI control on OnDragStart, update the value in OnDragObservable and dispose onDragEnd…Or you can keep an inspector always open. It all depends on your use case.

4

Here is what happening, at this playground https://playground.babylonjs.com/#31M2AP#216 I can extract very easily the angle between 0 and 2*pi. But when I try to do the same on my code:

function createGizmo(mesh){
    var gizmo = new BABYLON.GizmoManager(scene);
    gizmo.positionGizmoEnabled = true;
    gizmo.rotationGizmoEnabled = true;
    gizmo.scaleGizmoEnabled = true;
    gizmo.usePointerToAttachGizmos = false;
    //gizmo.boundingBoxGizmoEnabled  = true;
    gizmo.attachToMesh(mesh);
    
    mesh.actionManager = new BABYLON.ActionManager(scene);

    // Activate deactivate the gizmo

    mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnLeftPickTrigger, function () {
        // Hide rotation
        if(gizmo.rotationGizmoEnabled){
            gizmo.rotationGizmoEnabled = false;
        }else{
            gizmo.rotationGizmoEnabled = true;
        }
        // Hide scale
        if(gizmo.scaleGizmoEnabled){
            gizmo.scaleGizmoEnabled = false;
        }else{
            gizmo.scaleGizmoEnabled = true;
        }
        // Hide position
        if(gizmo.positionGizmoEnabled){
            gizmo.positionGizmoEnabled = false;
        }else{
            gizmo.positionGizmoEnabled = true;
        }
        
        
	}));
    
    // ========================== X DIRECTION ==========================
    // Watch for gizmo drags on x direction
    gizmo.gizmos.positionGizmo.xGizmo.dragBehavior.onDragObservable.add((evt)=>{
        console.log(evt);
    });

    // Watch for gizmo rotations on x direction
    gizmo.gizmos.rotationGizmo.xGizmo.dragBehavior.onDragObservable.add((evt)=>{
        let rotationX = radiansToDegree(mesh.rotation.x);
        console.log(rotationX);
        console.log(gizmo.gizmos.rotationGizmo.xGizmo.angle);
    });
   

    // ========================== Y DIRECTION ==========================
    // Watch for gizmo drags on y direction
    gizmo.gizmos.positionGizmo.yGizmo.dragBehavior.onDragObservable.add((evt)=>{
        console.log(evt);
    });

    // ========================== Z DIRECTION ==========================
    // Watch for gizmo drags on z direction
    gizmo.gizmos.positionGizmo.zGizmo.dragBehavior.onDragObservable.add((evt)=>{
        console.log(evt);
    });
    
}

It gives me as undefined. Any ideas why? I’m using babylon 4.2.0.

5

Angle accessor has been added in 5.0.0-alpha.12

6

Is there an url to load within the html or do I have to install via npm?

7

https://preview.babylonjs.com/babylon.js will point at the preview version