# Follow camera target between two players - new BJS user

**URL:** <https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240>\
**Category:** Questions\
**Tags:** camera, render-target\
**Created:** [September 26, 2022, 6:46am UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240 "2022-09-26T06:46:48Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aleebster](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@Aleebster](https://forum.babylonjs.com/u/Aleebster)\
**Post date:** [September 26, 2022, 6:46am UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/1 "2022-09-26T06:46:48Z")

</div>

Hi guys, I am very new to Babylon but Im really liking it so far.  
I have been trying to make a camera follow a target between two players (on the x axis).  
To show both players on the screen at all times. Think Street fighter etc.

Can anyone help me out as i am also very new to any kind of programming.  
Please see the playground below  
Thanks!!!

> **[Babylon.js Playground](https://playground.babylonjs.com/#VRWQ4E%238)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

---

<div class="post-metadata">

**Author:** ![musk](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/musk/32/17156_2.png) [@musk](https://forum.babylonjs.com/u/musk)\
**Post date:** [September 26, 2022, 8:19am UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/2 "2022-09-26T08:19:51Z")

</div>

> **[Babylon.js Playground](https://playground.babylonjs.com/#VRWQ4E%2310)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

Welcome ~ That’s obviously not good enough, and I’m interested in a good answer.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 26, 2022, 1:27pm UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/3 "2022-09-26T13:27:05Z")

</div>

Hello and welcome to the Babylon community!

I think @musk’s solution is a great starting point 🙂 It can be refined and customized a bit by calculating a “general” case, in which, given the two players’ positions, and a desired “margin” to the borders of the screen, you calculate the desired camera’s parameters - camera position, target, field of view (FOV), etc - to result in the proper viewing frustum:

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/8/6/866558c04b7d38193b0c26451904cf293f07bebb.png)

The solution to this will involve, fortunately or unfortunately, maths 🙂 I recommend taking a look at Scratchapixel’s camera lessons as they give a nice overview of how a 3D camera works: [The Perspective and Orthographic Projection Matrix (Building a Basic Perspective Projection Matrix) (scratchapixel.com)](https://www.scratchapixel.com/lessons/3d-basic-rendering/perspective-and-orthographic-projection-matrix/building-basic-perspective-projection-matrix). Since Babylon.js already calculates the projection matrix for you, you just need to think about how the parameters will influence on the frustum, and plug them in Babylon.

---

<div class="post-metadata">

**Author:** ![Aleebster](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@Aleebster](https://forum.babylonjs.com/u/Aleebster)\
**Post date:** [September 28, 2022, 2:16am UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/4 "2022-09-28T02:16:49Z")

</div>

Thanks Musk!

---

<div class="post-metadata">

**Author:** ![Aleebster](https://avatars.discourse-cdn.com/v4/letter/a/4491bb/32.png) [@Aleebster](https://forum.babylonjs.com/u/Aleebster)\
**Post date:** [September 28, 2022, 2:26am UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/5 "2022-09-28T02:26:16Z")

</div>

Thanks for getting back so quickly! I’ll look into it and give it a go.  
This approach sounds similar to this unity tutorial video? [Camera - tracking two objects at once --- Unity Tutorial: short and quick - 125 seconds - YouTube](https://youtu.be/8wWhRG3FWIs)

I also came across this unity video [MULTIPLE TARGET CAMERA in Unity - YouTube](https://youtu.be/aLpixrPvlB8)  
which uses bounds to centre the camera.

Maybe this could be done in Babylon also?

> **[Drawing Bounding Boxes | Babylon.js Documentation](https://doc.babylonjs.com/features/featuresDeepDive/mesh/displayBoundingBoxes)**
>
> Learn how to draw bounding boxes in Babylon.js.

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [September 28, 2022, 12:58pm UTC](https://forum.babylonjs.com/t/follow-camera-target-between-two-players-new-bjs-user/34240/6 "2022-09-28T12:58:38Z")

</div>

That’s pretty much on spot! You can use the camera’s transformation matrix ( [Camera | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/typedoc/classes/BABYLON.Camera#getTransformationMatrix)) to get from world to viewport coordinates, and the bounds approach is also a pretty good one (I like it even more than the first one to be honest) 😃
