# Vector project THREE.ArrayCamera

**URL:** <https://discourse.threejs.org/t/vector-project-three-arraycamera/24055>\
**Category:** Questions\
**Tags:** array-camera\
**Created:** [March 4, 2021, 2:17pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055 "2021-03-04T14:17:25Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 4, 2021, 2:17pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/1 "2021-03-04T14:17:25Z")

</div>

I’m trying to get the position of the sphere on the screen and display annotation near it. I’ve tried several approaches, but none of them give correct coordinates. The camera is THREE.ArrayCamera, and I think it’s the main problem, I’ve also tried to vector.project(camera.cameras[3]), still doesn’t work.

```
const canvas = renderer.domElement; // `renderer` is a THREE.WebGLRenderer
var sphere = spheres_array[0];
sphere.material.color.setHex("0x0000FF")
var camera_for_label = camera;
camera_for_label.updateMatrixWorld();
camera_for_label.updateProjectionMatrix();
var vector = sphere.getWorldPosition().clone();
// map to normalized device coordinate (NDC) space
vector.project( camera_for_label );
// map to 2D screen space
vector.x = Math.round( ( vector.x + 1 ) * canvas.width / 2 ),
vector.y = Math.round( ( - vector.y + 1 ) * canvas.height / 2 );
vector.z = 0;

    var annotation = document.querySelector('.annotation');
    annotation.style.top = `${vector.y}px`;
    annotation.style.left = `${vector.x}px`;
```

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 4, 2021, 2:38pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/2 "2021-03-04T14:38:46Z")

</div>

Can you please demonstrate the issue with a live example? [https://jsfiddle.net/8s9chu1g/](https://jsfiddle.net/8s9chu1g/)

---

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 4, 2021, 3:01pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/3 "2021-03-04T15:01:46Z")

</div>

[https://jsfiddle.net/cjuL4qx7/](https://jsfiddle.net/cjuL4qx7/)  
Yes

---

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 5, 2021, 2:18pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/4 "2021-03-05T14:18:06Z")

</div>

Did you have a chance to take a look?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 5, 2021, 3:54pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/5 "2021-03-05T15:54:22Z")

</div>

Yes but I could not figure out a solution so far.

---

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 7, 2021, 1:33pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/6 "2021-03-07T13:33:52Z")

</div>

Is there any other way that allows using HTML/CSS annotations?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 7, 2021, 2:03pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/7 "2021-03-07T14:03:26Z")

</div>

Have you already tried [CSS2DRenderer](https://threejs.org/docs/index.html#examples/en/renderers/CSS2DRenderer)?

---

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 7, 2021, 2:35pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/8 "2021-03-07T14:35:15Z")

</div>

same result

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 7, 2021, 4:51pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/9 "2021-03-07T16:51:04Z")

</div>

Can you please show with a live example how you have used `CSS2DRenderer`?

---

<div class="post-metadata">

**Author:** ![Andrew\_Bilous](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/andrew_bilous/32/12432_2.png) [@Andrew\_Bilous](https://discourse.threejs.org/u/Andrew_Bilous)\
**Post date:** [March 7, 2021, 5:49pm UTC](https://discourse.threejs.org/t/vector-project-three-arraycamera/24055/10 "2021-03-07T17:49:15Z")

</div>

[https://jsfiddle.net/vj9w0bdn/](https://jsfiddle.net/vj9w0bdn/)