# Third-Person Camera

**URL:** <https://discourse.threejs.org/t/third-person-camera/18624>\
**Category:** Resources\
**Tags:** third-person, camera-controls, camera\
**Created:** [September 11, 2020, 5:33pm UTC](https://discourse.threejs.org/t/third-person-camera/18624 "2020-09-11T17:33:25Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [September 11, 2020, 5:33pm UTC](https://discourse.threejs.org/t/third-person-camera/18624/1 "2020-09-11T17:33:25Z")

</div>

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)_  
https://codepen.io/Fyrestar/embed/preview/oNxERMr?height=300&slug-hash=oNxERMr&default-tabs=js,result&host=https://codepen.io

**Fixed goal** : [https://codepen.io/Fyrestar/pen/zYqjNOL](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](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](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.

---

<div class="post-metadata">

**Author:** ![felixmariotto](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/felixmariotto/32/5928_2.png) [@felixmariotto](https://discourse.threejs.org/u/felixmariotto)\
**Post date:** [September 14, 2020, 7:35am UTC](https://discourse.threejs.org/t/third-person-camera/18624/2 "2020-09-14T07:35:30Z")

</div>

@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`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code), which returns the same value regardless of your keyboard layout.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [September 14, 2020, 8:06am UTC](https://discourse.threejs.org/t/third-person-camera/18624/3 "2020-09-14T08:06:26Z")

</div>

Sure, updated them 😺

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.

---

<div class="post-metadata">

**Author:** ![eviltik](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eviltik/32/18513_2.png) [@eviltik](https://discourse.threejs.org/u/eviltik)\
**Post date:** [June 13, 2021, 10:54am UTC](https://discourse.threejs.org/t/third-person-camera/18624/4 "2021-06-13T10:54:07Z")

</div>

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

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

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

---

<div class="post-metadata">

**Author:** ![cconsta1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/cconsta1/32/14819_2.png) [@cconsta1](https://discourse.threejs.org/u/cconsta1)\
**Post date:** [December 11, 2022, 4:02pm UTC](https://discourse.threejs.org/t/third-person-camera/18624/5 "2022-12-11T16:02:00Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Umbawa\_Sarosong](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/umbawa_sarosong/32/30107_2.png) [@Umbawa\_Sarosong](https://discourse.threejs.org/u/Umbawa_Sarosong)\
**Post date:** [July 14, 2023, 3:13am UTC](https://discourse.threejs.org/t/third-person-camera/18624/6 "2023-07-14T03:13:48Z")

</div>

Excellent code, helps on the [camera controls](https://theneoverse.web.app/#virtualtour&&tours=edge-apartment), camera avoids wall and follows avatar

[Download source](https://theneoverse.web.app/#fSN20251022002)

---

<div class="post-metadata">

**Author:** ![alexmassy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/alexmassy/32/44465_2.png) [@alexmassy](https://discourse.threejs.org/u/alexmassy)\
**Post date:** [February 12, 2024, 12:18pm UTC](https://discourse.threejs.org/t/third-person-camera/18624/7 "2024-02-12T12:18:39Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![longtime](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/longtime/32/33303_2.png) [@longtime](https://discourse.threejs.org/u/longtime)\
**Post date:** [August 20, 2024, 8:29am UTC](https://discourse.threejs.org/t/third-person-camera/18624/8 "2024-08-20T08:29:13Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [October 2, 2024, 10:33am UTC](https://discourse.threejs.org/t/third-person-camera/18624/9 "2024-10-02T10:33:24Z")

</div>

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.