How to set the rotation of a mesh to follow the rotation of the camera, when the mesh is parented to the camera

Questions
1

Hi All!

I would like to create a “gizmo” which shows the rotation of the arcrotate camera (similarly as in blender or in other 3d modeling tools)
I struggle to set the rotation of this gizmo to reflect the camera rotation.
If I rotate on a single axis it works, but if I rotate on two axis the rotation is not correct anymore.

I’m struggling with it for a while to set the beta and alpha values of the camera to the gizmo mesh, but I’m lost a little bit.

https://playground.babylonjs.com/#I2KEBQ#18

The rotation for the mesh is set in an interval, the interesting part is around here:

setInterval(() => {
const offsetX = 1.2120256565243244;
const offsetY = 3 * Math.PI / 2;
const rotateX = - (offsetX - camera.beta);
const rotateY = - (offsetY - camera.alpha);
mesh.rotation.y = rotateY;
mesh.rotation.x = rotateX;
}, 10)

Thanks!

2

Hi @gsanta, maybe @Cedric can help, he has some great experience with gizmo :slight_smile:

1 Like
3

Interesting problem. I would approach is a bit differently, trying to utilise secondary camera and perhaps rendering layers.

(…2 hours later after bunch of reading and research)
Came here to ask question but got dragged into yours.

I have approached it from the perspective of having a gizmo layer. I have worked through it with assumption it would be much easier to calculate actual rotation from given reference (main camera in this case) It took few minutes to get the basics going but with my rubbish math spend almost 2 hours trying figure out following two lines of code. :frowning:

const q = mainCam.absoluteRotation        
gizmo.rotationQuaternion = new BABYLON.Quaternion(q.x, q.y, q.z, -q.w)

Here is what I have come up with.
https://playground.babylonjs.com/#0BFRL1

Gizmo is not as pretty as yours but is easy to adjustable. Just remember to make sure you are rendering gizmo meshes on correct render layer.

Hope it helps.

3 Likes
4

For inquisitive minds, here are few useful links that helped in above example.

5

Looks super cool, thanks a lot!
I will integrate it into my example and get back with the results!

6

Glad I could help. Enjoy! :smiley:

7

Genious solution!
I integrated it and works perfectly.
Here is the final example: https://playground.babylonjs.com/#I2KEBQ#20

You can even click on the spheres and the camera will turn in that direction (so blender’s gizmo is more or less replicated)

Thanks again!

8

If it can help and in case you missed them, gizmos are also existing in Babylon: Gizmos | Babylon.js Documentation

2 Likes
9

Thanks, I did not know about these!
These are very useful for the editing part of your project, I had a similar goal in mind with this gizmo.
(However it is not attached to a mesh, but to the camera)

10

Hey @gsanta. That looks really cool. Well done mate!