Can not get correct rotation on rotation drag end with boundingBoxGizmo

Bugs
1

Complete html code ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<canvas id="renderCanvas" style="width: 80%; height:80%;"></canvas>
<script src="https://cdn.babylonjs.com/babylon.js"></script>
<script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://cdn.babylonjs.com/gui/babylon.gui.min.js"></script>
<script>
    let interVal = setInterval(() => {
        if (!!(window['BABYLON'])) {
            clearInterval(interVal)
            window.scene = renderScene();
            window.gizmoManager = addGizmo();
            renderGLB();
        }
    }, 100)

    function renderScene() {
        const canvas = document.getElementById('renderCanvas');
        const engine = new BABYLON.Engine(canvas, true);
        const scene = new BABYLON.Scene(engine);
        const camera = new BABYLON.ArcRotateCamera("camera", -0.84, 1.16, 79.98147309485353, BABYLON.Vector3.Zero(), scene);
        camera.attachControl(canvas, true);
        window.camera = camera;
        const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
        engine.runRenderLoop(() => {
            scene.render();
        });
        return scene;
    }

    function addGizmo() {
        const utilLayer = new BABYLON.UtilityLayerRenderer(scene);
        utilLayer.setRenderCamera(scene.cameras[0]);
        const gizmoManager = new BABYLON.GizmoManager(scene, 1, utilLayer);
        gizmoManager.boundingBoxGizmoEnabled = true;
        gizmoManager.positionGizmoEnabled = true;

        gizmoManager.gizmos.boundingBoxGizmo.fixedDragMeshScreenSize = true;
        gizmoManager.gizmos.boundingBoxGizmo.fixedDragMeshScreenSizeDistanceFactor = 8;
        gizmoManager.gizmos.boundingBoxGizmo.setEnabledRotationAxis("xyz");
        gizmoManager.gizmos.boundingBoxGizmo.setEnabledScaling(true);

        gizmoManager.gizmos.boundingBoxGizmo.scalingSnapDistance  = 0.1;
        gizmoManager.gizmos.boundingBoxGizmo.incrementalSnap = true;
        gizmoManager.gizmos.boundingBoxGizmo.scaleDragSpeed = 1;
        gizmoManager.gizmos.boundingBoxGizmo.onRotationSphereDragEndObservable.add((eventData, eventState) => {
            const rotatedMesh = window.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh;
            // always print {_isDirty: false, _x: 0, _y: 0, _z: 0}
            console.log('rotatedMesh.rotation',rotatedMesh.rotation);
        })

        gizmoManager.gizmos.boundingBoxGizmo.onScaleBoxDragEndObservable.add((eventData, eventState) => {
            const rotatedMesh = window.gizmoManager.gizmos.boundingBoxGizmo.attachedMesh;
            // get right scaling
            console.log('rotatedMesh.scaling',rotatedMesh.scaling);
        })
        return gizmoManager;
    }

    async function renderGLB() {
        const cube = BABYLON.MeshBuilder.CreateBox("cube", { size: 20 }, scene);
        window.gizmoManager.attachToMesh(cube);
    }
</script>
</body>
</html>

Online demo：

2

cc @Cedric

3

When using Gizmo, mesh rotation switch to Quaternion instead of Euler

image
image888×737 46.8 KB

So, instead of getting Euler angles, do the conversion from Quaternion to Euler (with `toEulerAngles)

2 Likes
4

reslove code rotatedMesh.rotationQuaternion.toEulerAngles()

1 Like