# How to implement First Person Shooter camera?

**URL:** <https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373>\
**Category:** Questions\
**Created:** [February 2, 2020, 8:34am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373 "2020-02-02T08:34:47Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 2, 2020, 8:34am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/1 "2020-02-02T08:34:47Z")

</div>

I’m trying to implement First Person Shooter camera.  
FPS camera is something that stays around the forehead of the character model (and bone) (track the head’s position and move together), and it rotates as the head rotates.  
Or I should say that the head follows the rotation of the FPS camera.  
(In this case, the model keeps standing and only rotates its head to see the world around him).

I thought of using Universal Camera and a Bone that is embedded in the head mesh, and synchronize rotations of these two.  
But **I am not sure which properties of camera and bone should be linked**.  
And axis (local or world?) matter is also confusing.

* * *

I’m using a model (and texture) from this [example](https://www.babylonjs-playground.com/#92Y727).  
This [Multi View](https://doc.babylonjs.com/how_to/how_to_use_multi-views) method would help you to compare TPS and FPS.

If you could help me I really appreciate it!  
Thank you for reading.  
miyabi

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 3, 2020, 4:44pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/2 "2020-02-03T16:44:40Z")

</div>

Just parent the camera to the head armature, or just add like a sway calculation and bounce from the movement.

Use a freecam and just treat it like any other node you need to position.

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 4, 2020, 5:28am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/3 "2020-02-04T05:28:22Z")

</div>

Parenting looks cool, but is it possible to parent a camera to a bone?  
I tried it, but it seems not working.  
If you have nailed it, would you show me a code?

Thank you for your reply.  
miyabi

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [February 4, 2020, 5:05pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/4 "2020-02-04T17:05:05Z")

</div>

You can attach a mesh to a bone and then parent the camera to that mesh

To attach a mesh to a bone: [https://www.babylonjs-playground.com/#11BH6Z#443](https://www.babylonjs-playground.com/#11BH6Z#443) (Line #45)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 4, 2020, 9:32pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/5 "2020-02-04T21:32:16Z")

</div>

But Ideally if its first person you would attack your mesh to your camera and play animations in response to your inputs.

[https://www.babylonjs-playground.com/#11BH6Z#447](https://www.babylonjs-playground.com/#11BH6Z#447)  
You will need to hide certain parts of your mesh to the camera though, like hide the head and move the camera forward from center slightly. You gotta consider what the person will actually “see” from first person.

So the main stuff you gotta worry about is the height of the model add some sort of simple physics impostor or bounding box/capsule setup. Then attach the camera to that. Then you will need to tailor your mesh and animations for FPS.

Any sort of sway can be a simple cos/sin addition to the cameras rotation specific axes scaled by the magnitude of some factor like the speed of the player.

---

<div class="post-metadata">

**Author:** ![nasimiasl](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/nasimiasl/32/34_2.png) [@nasimiasl](https://forum.babylonjs.com/u/nasimiasl)\
**Post date:** [February 5, 2020, 5:38am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/6 "2020-02-05T05:38:21Z")

</div>

dynamic fov control (simulator for eyes focus )

[https://www.babylonjs-playground.com/frame#UGLGTJ#58](https://www.babylonjs-playground.com/frame#UGLGTJ#58)

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 5:49am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/7 "2020-02-05T05:49:56Z")

</div>

Thanks for your reply, guys!  
I’ve implemented looks-like-what-I-wanna-do FPS camera in this [playground](https://www.babylonjs-playground.com/#GLQHHB)  
Please check this out.

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 8:58am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/8 "2020-02-05T08:58:05Z")

</div>

Wow this looks great!  
This dynamic fov control must be very useful when you move around the world, but in my case, models just sit and only move their upper body to see the world around them, so I might not employ your great method to my app.  
But thanks for showing me pretty good demo! 😀

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 9:16am UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/9 "2020-02-05T09:16:32Z")

</div>

What I wanna do looks like [this playground](https://www.babylonjs-playground.com/#GLQHHB).  
Is there any better way to do this?

Thanks for your attention.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [February 5, 2020, 1:20pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/10 "2020-02-05T13:20:07Z")

</div>

It looks great I think you should go with it

---

<div class="post-metadata">

**Author:** ![erey](https://avatars.discourse-cdn.com/v4/letter/e/f04885/32.png) [@erey](https://forum.babylonjs.com/u/erey)\
**Post date:** [February 5, 2020, 3:25pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/11 "2020-02-05T15:25:56Z")

</div>

Offset the local position of the camera forward so that the view does not feel like it is in the head of the model, or hide the head (don’t know if this is possible).

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 4:01pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/12 "2020-02-05T16:01:08Z")

</div>

That is exactly what I am trying to solve.  
I think, to properly make the camera stay exactly the same position relative to the head (maybe on the forehead of the model), the camera need to move inside the local space of the head (actually the neck bone).  
So I want the camera to use the local space of neck bone as its world space.

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 4:26pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/13 "2020-02-05T16:26:49Z")

</div>

You know the complicated thing is this,

- I want the bone to follow the rotation of the camera

- and I want the camera to follow the position of the bone (and also move some distance relative to the local space of the bone)

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 5, 2020, 4:26pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/14 "2020-02-05T16:26:56Z")

</div>

What why? That is not normally how you would do it but ok…

Why do you need the camera attached to the mesh and not vice versa?

Am I missing something?

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 4:29pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/15 "2020-02-05T16:29:39Z")

</div>

I thought, it is said that I can control universal camera by mouse, so if the bone follow the motion of the camera, that would be good.

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 4:31pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/16 "2020-02-05T16:31:54Z")

</div>

Maybe the best solution is

- Parent the bone to the camera, and somehow implement some code to move the bone from mouse.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 5, 2020, 4:32pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/17 "2020-02-05T16:32:05Z")

</div>

Not necessarily, in fact it might cause jittery jumpy movements, and you are gonna have to constantly update your up vector anyways on the camera.

Re read my post about the height and animations reliant on basic math.

A simple solution given what you would want to lerp the cameras position to the bones absolute position. But then you are gonna have to figure out a way to establish forward.

---

<div class="post-metadata">

**Author:** ![miyabi](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/miyabi/32/6678_2.png) [@miyabi](https://forum.babylonjs.com/u/miyabi)\
**Post date:** [February 5, 2020, 4:43pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/18 "2020-02-05T16:43:18Z")

</div>

Thank you for your replys Pryme8!  
I like the way how universal camera rotates as I keep clicking on the canvas and move the cursor around.

- The distances that the cursor’s moved along x (and y) axis from the position of mouse-on event affects the camera’s rotation around y (and x)

Do I need to implement this distance-to-rotation conversion by myself (which I think I can but not the best at)?

So the solution would be

1. Make the camera a child of the head mesh which is attached to the neck bone.  
So the parent-\>child relationships becomes [neck bone]-\>[head mesh]-\>[fps camera(not universal camera anymore)].

2. Implement the _cursor’s-moved-distance-to-rotation-around-x-and-y-axis_ conversion by myself, and use that calculated rotation to rotate the neck bone.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 5, 2020, 5:15pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/19 "2020-02-05T17:15:20Z")

</div>

But why? The person in first person will never see it unless you are using a reflection probe and do a mirror or something, but even then I belive convention would be to render a different model to the reflection probe then what you are rendering to the first person camera.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [February 5, 2020, 5:59pm UTC](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373/20 "2020-02-05T17:59:37Z")

</div>

Remember we are only trying to simulate real life models not emulate them.

There is always a creative solution. The main consideration to have here is what is your final product trying to achieve, a realistic biometrics system or just a representation to fool the brain?

[Next page](https://forum.babylonjs.com/t/how-to-implement-first-person-shooter-camera/8373.md?page=2)
