Getting Started - Chapter 8 - Have a Look Around

Have a Look Around

Currently we are using the ArcRotateCamera which has us orbiting the village world from a distance. How about a view from inside the village? Let's parent the camera to the character walking around the village and with a few adjustments to values look around from over his shoulder. The creation of the ArcRotateCamera has this form,

const camera = new BABYLON.ArcRotateCamera("name", alpha_angle, beta_angle, radius, target_position);

As will all cameras in order to move it in response to user input we need to attach it to the canvas.

camera.attachControl(canvas, true);

Think of this camera as one orbiting its target position, or more imaginatively as a spy satellite orbiting the earth. Its position relative to the target (earth) can be set by three parameters, alpha (radians) the longitudinal rotation, beta (radians) the latitudinal rotation and radius the distance from the target position.

In our case we want to have the camera parented to the character

camera.parent = dude;

and, because the dude is scaled in size we use a large radius which as parented to the dude will be scaled down. To track him we use

const camera = new BABYLON.ArcRotateCamera("camera", Math.PI / 2, Math.PI / 2.5, 150, new BABYLON.Vector3(0, 60, 0));

Since the character makes instant turns the camera also does. To make the viewing smoother a smoother track for the character to follow would be needed.

We can also use a different type of camera to follow the character another way.