# How project(camera) work in threejs?

**URL:** <https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969>\
**Category:** Questions\
**Tags:** camera, math\
**Created:** [April 28, 2023, 11:27am UTC](https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969 "2023-04-28T11:27:02Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [April 28, 2023, 11:27am UTC](https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969/1 "2023-04-28T11:27:02Z")

</div>

I used this code `

```javascript
new THREE.Vector3(0,5,2).project(camera)

```

got this result  
n {x: 0, y: 2.1720422880686763, z: 0.9335266860019336}  
when doing

```javascript
new THREE.Vector3(0,5,2).unproject(camera)

```

got this :n {x: -0.29274196547907116, y: 11.222416135936928, z: 16.674224015138016}  
How this works which mathematic formula used to get this result .

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/c/8c3da961986308e0dde41c61b0bb9f4f76902613.jpeg)  
 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/c/3c64021780e6207c5da70b664714804724cd51e1.jpeg)  
I used Thales Theorem formula using this figure  
[figure](http://learnwebgl.brown37.net/_images/perspective_divide.png)  
but not getting the required result 🤔

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [April 29, 2023, 11:19am UTC](https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969/2 "2023-04-29T11:19:39Z")

</div>

### Short answer

Both `THREE.Vector3.project` and `THREE.Vector3.unproject` perform calculation by multiplication of the vector by two matrices.

### Long answer

Some of the fundamental mathematical operations in Computer Graphics are matrix calculations. A lot of transformations can be represented and processed by matrices – translation, rotation, scaling, mirroring, switching coordinate systems, … and projection.

In Three.js `THREE.Vector3.project` calculates the normalized coordinates of a vertex. These coordinates are in the range [-1,1]. As expected this is done by two matrix multiplications – one matrix that encodes the 3D position and orientation of the camera; and a second matrix that encodes the intrinsic properties of the camera that define the size and shape of its frustum.

The opposite operation is `THREE.Vector3.unproject` that calculates the frustum coordinates of a vector in normalized coordinates. Naturally it is done by two matrix multiplications too – the inverse matrices from the projection, but multiplied in reverse order.

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [April 29, 2023, 5:05pm UTC](https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969/3 "2023-04-29T17:05:07Z")

</div>

Look what it says [here](https://threejs.org/docs/?q=vec#api/en/math/Vector3.project):

> Projects this vector from world space into the camera’s normalized device coordinate (NDC) space.

I know you did not, because if you did - your question would be what a hell is NDC. And then in turn if you paste that question into google you can find a pic like this:

![NDC](https://res.cloudinary.com/dx1kpewvo/image/upload/v1651066902/2022-05-02/Screenshot_2022-04-27_094119_efatap.png)

which more or less already explains what it is (and by extension what the numbers project() returns are) - frustum warped into a cube. But you are, of course, better off reading the text that comes with the image.

---

<div class="post-metadata">

**Author:** ![mohamad\_chouacha](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mohamad_chouacha/32/34568_2.png) [@mohamad\_chouacha](https://discourse.threejs.org/u/mohamad_chouacha)\
**Post date:** [April 29, 2023, 7:05pm UTC](https://discourse.threejs.org/t/how-project-camera-work-in-threejs/50969/4 "2023-04-29T19:05:08Z")

</div>

I Think to get result for Vecctor.project(camera) we need to use this matrix:

 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/2/6281e23b0d76d95c696dab24a5604437fc2d533c.jpeg)  
 ![Capture](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/0/b0cbc924336110096e67bd563c08430b194e2b7a.jpeg)