Third-Person Camera

Resources
, ,
1

Here are some basic examples i made for implementing a third-person camera. In order to avoid a stiff attachment to the player we can smoothly lerp the camera or camera rig to the goal to compensate quick motions.

First the more ideal dolly concept which respects the dolly distance, moving the camera dolly behind the player again even when not moving.

Dolly + goal
(use keyboard ASDW)

Fixed goal: https://codepen.io/Fyrestar/pen/zYqjNOL

This is the first example i made longer ago. As you see in some cases the camera will straight move over the player flipping to the other side as it is straight moving towards the goal.

Here is the dolly concept without goal. It basically is like just pulling a dolly behind you.
(use keyboard ASDW)
Dolly: https://codepen.io/Fyrestar/pen/WNwMWZV?editors=0010

I’ve seen this behaviour in some games, though i personally don’t like that you have to move further in order to pull the camera behind you again.

You can further adapt this also to avoid collisions with your scene, here is a very simple one using a raycaster from the player towards the dolly using the shorter distance if needed. But notice: this introduces the issue of the camera going straight towards the player again and will fail when the origin is inside the wall.

Dolly + goal + wall avoiding: https://codepen.io/Fyrestar/pen/ExKLZxd

To properly handle collisions a sphere collider should be used for the camera rather just a ray, in this case your dolly will be “pulled around the corner” and rotate. This can be done with a physics engine or a basic sphere collider.

15 Likes
2

@Fyrestar could you check the property event.code in your listener for keydown please ?
The keys known in English keyboards as ASDW are not ASDW in all keyboard layouts ( on French keyboard for instance, I play with ZSDQ, which are at the same position as ASDW on an English keyboard ). The solution is event.code, which returns the same value regardless of your keyboard layout.

3 Likes
3

Sure, updated them :smiley_cat:

Edit: also made the player acceleration a bit smooth as it would be for a game. You could also decrease the alpha for lerping the dolly or the camera to the attached follower.

4 Likes
4

Btw, you can upgrade to r129, it’s working as expected.

I’ve fork your codepen, i’m adding XR stuffs :wink:

I’ll put the link when the result is interesting.

3 Likes
5

I used part of your code to fix my project and I wanted to say thanks!

2 Likes
6

Excellent code, helps on the camera controls, camera avoids wall and follows avatar

7

Ouh yeah ! So usefull ! Thank you for the sharing !

8

wow, that’s amazing game, but it’s play on mobile browser?

9

For mobile you generally need to implement some type of input controller, like a virtual joystick.

You don’t need a visual fixed joystick on the screen, you can just take where the user touches as the center and the direction pulled from there to control, along with the distance to the center as speed for instance.