After rotating the z-axis (blue) in the playground, rotating the y-axis (green) rotates the mesh around the local axis. Only the gizmo is fixed to the global axis.
However, in babylonjs version 5.9 or lower, if you apply “updateGizmoRotationToMatchAttachedMesh = false”, the mesh rotates based on the global axis.
Is this an update from version 6? Or is it a bug?
If updated, what option should I enable to rotate the mesh around a global axis?
// Below is babylonjs version 6 or higher.
// This is version 5.9.0 of babylonjs.
// This is the source code created for version testing. (Version 5.9 and 6 used the same source code.)
import {
ArcRotateCamera,
Engine,
HemisphericLight,
MeshBuilder,
PositionGizmo,
RotationGizmo,
Scene,
UtilityLayerRenderer,
Vector3,
} from "babylonjs";
import { useEffect, useRef } from "react";
import "./App.css";
function App() {
const ref = useRef<HTMLCanvasElement>(null);
useEffect(() => {
const engine = new Engine(ref.current, true, {
doNotHandleContextLost: true,
stencil: true,
});
const scene = new Scene(engine);
const camera = new ArcRotateCamera(
"camera",
0,
0,
50,
Vector3.Zero(),
scene
);
// const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
camera.attachControl(ref.current, true);
const light = new HemisphericLight("light", new Vector3(0, 1, 1), scene);
light.intensity = 0.7;
scene.onReadyObservable.addOnce(() => {
const box = MeshBuilder.CreateBox("test", { size: 10 }, scene);
const gizmoRenderer = new UtilityLayerRenderer(scene);
const gizmos = [];
const transGizmo = new PositionGizmo(gizmoRenderer);
transGizmo.scaleRatio = 1.5;
const rotGizmo = new RotationGizmo(gizmoRenderer);
// disable local axes, then use global axes
rotGizmo.updateGizmoRotationToMatchAttachedMesh = false;
rotGizmo.attachedMesh = box;
gizmos.push(transGizmo);
gizmos.push(rotGizmo);
gizmos.forEach((gizmo) => {
gizmo.attachedNode = box;
});
});
engine.runRenderLoop(() => {
scene.render();
});
return () => {
scene.dispose();
engine.dispose();
};
}, []);
return (
<>
<canvas ref={ref} style={{ width: "100vw", height: "100vh" }} />
</>
);
}
export default App;