Matching target rotation with ArcRotateCamera rotation

Questions
1

Hello!

I’m attempting to have my ArcRotateCamera update the rotation of the target that I’m following. The goal being that when the camera pans left/right, the target (my player) updates itself. Here’s a quick video of my implementation:

The first few seconds demos how I want the action to operate (camera always behind the target). I managed to get this working with the keyboard but not with the mouse action (left right pan). My goal is to calculate the angle of the ArcRotateCamera and modify the rotation of the character to always have his rear to the cam.

I think this may be pretty simple. I believe I saw an example of an answer in my research but it didn’t quite work using Euler Angles. I believe there’s a function that will translate the alpha/beta into radians?

Any suggestions?

2

Hi dbase,

Without a Playground or other working example to inspect, it’s difficult to know what will fit well with the techniques you’re already using. You could inspect the Babylon ArcRotateCamera source to find the math that turns alpha and beta into an actual rotation. However, I wouldn’t recommend bothering with alpha and beta at all. You should be able to recover the rotation in Y you’re looking for just by examining the angle between the camera’s forward direction and some reference direction; Babylon provides helper methods for most of the operations. A simplistic (and unoptimized) example of this is in the following Playground.

Cube Rotating To Match ArcRotateCamera | Babylon.js Playground (babylonjs.com)

Hope this helps, and best of luck!

2 Likes
3

Simple Third Person Camera (using Three.js/JavaScript) - YouTube, check out this video on YouTube. Sure it uses threejs, but the concepts are familiar.

4

Hmmm that’s so weird I’m getting an error.

const angle = Vector3.GetAngleBetweenVectorsOnPlane(
  this._freeCamera.getForwardRay().direction,
  Vector3.Forward(),
  Vector3.Up()
);
this._avatar.rotationQuaternion = Quaternion.RotationAxis(Vector3.Up(), -angle);

Error:

TypeError: Vector3.GetAngleBetweenVectorsOnPlane is not a function at Observer.callback
5

Thanks! That’s an awesome video =)

6

I said this in another post just now but wouldn’t it just work to do

player.mesh.lookAt(camera.getForwardRay().direction) 
player.mesh.rotation.y = 0
7

Hmmm, I can give that a shot as well. I have to now experiment with some advanced controls so this might actually be a second approach to test.

PS the regarding my above error seems like I needed to bump to Babylon 5-alpha. It works now.

8

Is your Playground set to use Babylon 4.2? GetAngleBetweenVectorsOnPlane looks like it was added recently, so if you need 4.2 then that convenience method isn’t available. It’s not hard to do it manually, though. This next version should work on 4.2 as well as later versions.

Cube Rotating To Match ArcRotateCamera | Babylon.js Playground (babylonjs.com)

2 Likes