I am writing a model viewer in molecular dynamics with babylonjs. I want to set a secondary axis helper in the left bottom of the viewport. This indicator is always on the screen, a little bit similar to the indicator in the blender. First, I want it can indicate the rotation of the model; Second, when I click an axis on it, then the camera moves to the corresponding view. How should I do this? Thanks in advance!
Do you mean rotation of the model or a representation of world axes, rotating with the 3D viewport view? The Blender orbit gizmo represents world axes and rotates relative to the 3D viewport view, not those of the currently selected mesh.
You’ll need to make a custom gizmo, but could extend or grab the geometry declarations from the Babylon.js gizmo code. To get the gizmo positioned and rotating with the camera you can use something like the following (but I haven’t tested):
myGizmo.parent = scene.activeCamera;
myGizmo.position = myCameraOffset;
scene.registerBeforeRender(() => {
myGizmo.rotationQuaternion = Quaternion.Inverse(scene.activeCamera.absoluteRotation);
});
scene.onActiveCameraChanged(() => {
myGizmo.parent = scene.activeCamera;
});
Clicking on various parts of the gizmo you can make change the active camera (e.g. front, side, left, top cameras) and when the active camera changes you’ll need to reparent your gizmo.
I am so glad that you can give me an idea about how to do this. You can tell that I am a fresh new one to the babylonjs even 3D programing. Gizmo is definitely a good solution to my problem, but still some issues to fix. First is how to keep the indicator keep the same behavior as the camera, and keep it in view; Second is that it seems not a suitable gizmo to be an indicator(i think the positionGizmo is good in shape but not in the function). So as you said, I need to modify or extend a new gizmo. I need to learn more about babylonjs then can do this work… Thanks a lot for your help!