How to set the rotation of ArcRotateCamera based on mesh direction when animation starts

Hello. I’m working on a project where we import a lot of animations to animate an avatar. Sadly not all animations face the same direction and I would like the camera to start of facing the front of the avatar each time an animation starts. Due to the requirements of the control of the camera I have decided to pick the arcRotateCamera. My question therefore is: “how do I got about setting the alpha and beta for the camera based on the forward axis of the avatar?”

Here is a playground project to further detail my problem: ArcRotateLock | Babylon.js Playground (babylonjs.com)

Before clicking the button the camera is facing the blue axis. When we start the animation we see that the blue axis is facing a different direction. My goal is, when we click the button, that we start of facing the blue axis again.

Thanks in advance :slightly_smiling_face:

Hello @ToucheToucan , how are you doing? Welcome to the Babylon forum!

I added a possible solution to you playground example: ArcRotateLock | Babylon.js Playground (babylonjs.com)

The basic thinking is that, instead of using the alpha and beta of the archRotateCamera, you can instead set its position directly. In this case I’m using the targets “right” vector (but you could also use the forward vector if you want to face the “front” of the model) and setting the position based on the radius property of the camera.

Setting the camera target to be the box position will make sure the camera continues to look at the model, so there is no need to manually set the rotation.

Please take a look and let me know if this example is useful.

3 Likes

Wow, thanks for the quick response. And thanks for the warm welcome. So far I’m really enjoying Babylonjs.

The way you change the camera position with new coordinates is really intuitive, I can easily tweak it and add it to my main project. At first I was thinking how I could do some math to calculate alpha and beta based on the forward of the mesh, but this is so much better.

Thanks again!

1 Like