# R3F & Rapier third person controller and follow camera

**URL:** <https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832>\
**Category:** Questions\
**Tags:** camera, react-three-fiber\
**Created:** [March 8, 2023, 9:13am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832 "2023-03-08T09:13:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![kdigidydawg](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kdigidydawg/32/34198_2.png) [@kdigidydawg](https://discourse.threejs.org/u/kdigidydawg)\
**Post date:** [March 8, 2023, 9:13am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/1 "2023-03-08T09:13:49Z")

</div>

Hello,

I just wanted to ask if anyone has created a third person controller and follow camera using @react-three/fiber & @react-three/rapier similar to this example → [CodeSandbox - CodeSandbox](https://codesandbox.io/p/github/sliktrik/r3f-world-with-character/main?file=%2FREADME.md&workspace=%257B%2522activeFileId%2522%253A%2522clez6ybn4000gg9ghhqm11iya%2522%252C%2522openFiles%2522%253A%255B%2522%252FREADME.md%2522%255D%252C%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522gitSidebarPanel%2522%253A%2522COMMIT%2522%252C%2522spaces%2522%253A%257B%2522clezdlos7000x3b6hfohnsuty%2522%253A%257B%2522key%2522%253A%2522clezdlos7000x3b6hfohnsuty%2522%252C%2522name%2522%253A%2522Default%2522%252C%2522devtools%2522%253A%255B%257B%2522key%2522%253A%2522clezdlos7000y3b6hn30qwah1%2522%252C%2522type%2522%253A%2522PROJECT_SETUP%2522%252C%2522isMinimized%2522%253Afalse%257D%252C%257B%2522type%2522%253A%2522PREVIEW%2522%252C%2522taskId%2522%253A%2522start%2522%252C%2522port%2522%253A3000%252C%2522key%2522%253A%2522clezdlos7000z3b6ha9izsakt%2522%252C%2522isMinimized%2522%253Afalse%257D%255D%257D%257D%252C%2522currentSpace%2522%253A%2522clezdlos7000x3b6hfohnsuty%2522%252C%2522spacesOrder%2522%253A%255B%2522clezdlos7000x3b6hfohnsuty%2522%255D%252C%2522hideCodeEditor%2522%253Afalse%257D)

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 8, 2023, 9:30am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/2 "2023-03-08T09:30:10Z")

</div>

the one in your link looks good, why not using it?

otherwise there’s a primitive keyboardcontrols in drei [GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber](https://github.com/pmndrs/drei#keyboardcontrols) this is also being used in bruno simons last chapter where you make a physics game with a controller. [Three.js Journey — Create a game with R3F](https://threejs-journey.com/lessons/create-a-game-with-r3f)

---

<div class="post-metadata">

**Author:** ![kdigidydawg](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kdigidydawg/32/34198_2.png) [@kdigidydawg](https://discourse.threejs.org/u/kdigidydawg)\
**Post date:** [March 8, 2023, 9:46am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/3 "2023-03-08T09:46:16Z")

</div>

The version in the link i posted doesnt use @react-three/rapier or any other physics library

ideally id like to have the character wrapped with a so it can interact with other objects in the space

also, im not great at maths, but from what i can understand the movement/force applied is needs to differ from the above example

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 8, 2023, 10:51am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/4 "2023-03-08T10:51:08Z")

</div>

here’s an example with a first person controller using rapier

> **[Minecraft - CodeSandbox](https://codesandbox.io/s/minecraft-vkgi6)**
>
> Mini Minecraft implementation.

---

<div class="post-metadata">

**Author:** ![kdigidydawg](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kdigidydawg/32/34198_2.png) [@kdigidydawg](https://discourse.threejs.org/u/kdigidydawg)\
**Post date:** [March 8, 2023, 10:44pm UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/5 "2023-03-08T22:44:04Z")

</div>

Thanks, I’ve seen this example, but it doesn’t quite match the ‘3rd person’ example im looking for

Main differences are the camera location and rotation behind the player model

---

<div class="post-metadata">

**Author:** ![Gigalink](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gigalink/32/35805_2.png) [@Gigalink](https://discourse.threejs.org/u/Gigalink)\
**Post date:** [April 28, 2023, 2:47pm UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/6 "2023-04-28T14:47:23Z")

</div>

I am looking exactly for the same as you @kdigidydawg , by any chance did you find a solution?  
I found a few (where the camera will also rotate according to keystroke / direction user is going, with a subtle lerp and delay) but they are all in vanilla three js and i’m struggling to port it to r3f / drei.

---

<div class="post-metadata">

**Author:** ![mohamd\_almhde](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamd_almhde/32/32010_2.png) [@mohamd\_almhde](https://discourse.threejs.org/u/mohamd_almhde)\
**Post date:** [July 28, 2023, 11:12am UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/7 "2023-07-28T11:12:15Z")

</div>

you can check this article it’s about third person control  
[https://medium.com/@m.mhde96/react-three-fiber-third-person-control-a0476c189dd1](https://medium.com/@m.mhde96/react-three-fiber-third-person-control-a0476c189dd1)

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 1, 2023, 10:51pm UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/8 "2023-08-01T22:51:54Z")

</div>

Here is a 3rd person controller demo. Sorry, it doesn’t use `rapier`. It uses `useCannon`  
[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/5/357e6841438c2ecabd71c145cf338665f2bb1af7.jpeg)](https://sbcode.net/react-three-fiber/obstacle-course/)  
Third Person Controller Demo: [Obstacle Course - React Three Fiber Tutorials](https://sbcode.net/react-three-fiber/obstacle-course/)

---

<div class="post-metadata">

**Author:** ![Andrew\_Chen](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_chen/32/32324_2.png) [@Andrew\_Chen](https://discourse.threejs.org/u/Andrew_Chen)\
**Post date:** [October 23, 2023, 11:18pm UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/9 "2023-10-23T23:18:48Z")

</div>

Hopefully my project helps 😁: [ecctrl (with animations) - CodeSandbox](https://codesandbox.io/s/ecctrl-with-animations-nr4493)  
You can also find it in pmndrs/ecctrl: [GitHub - pmndrs/ecctrl: 🕹️ A floating rigibody character controller](https://github.com/pmndrs/ecctrl)

---

<div class="post-metadata">

**Author:** ![lighthaus](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lighthaus/32/43555_2.png) [@lighthaus](https://discourse.threejs.org/u/lighthaus)\
**Post date:** [January 7, 2024, 2:34pm UTC](https://discourse.threejs.org/t/r3f-rapier-third-person-controller-and-follow-camera/48832/10 "2024-01-07T14:34:41Z")

</div>

> [@Andrew\_Chen](#):
>
> You can also find it in pmndrs/ecctrl:

Amazing, I’ve been looking for something like this, thanks!