# How to make the camera face 90 degrees to left/right/up/down

**URL:** <https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165>\
**Category:** Questions\
**Tags:** transform\
**Created:** [December 2, 2019, 5:17pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165 "2019-12-02T17:17:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Gabriel](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@Gabriel](https://discourse.threejs.org/u/Gabriel)\
**Post date:** [December 2, 2019, 5:17pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/1 "2019-12-02T17:17:34Z")

</div>

Hello, I’m trying to rotate my camera 90 degrees to any direction, but so far I couldnt find anything that works… I`ve tried using vectors and quarternions, also used the lookat method…

If you could please give me some help.

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [December 2, 2019, 6:02pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/2 "2019-12-02T18:02:27Z")

</div>

Could you describe what you tried and what the issue for you is? You might didn’t converted degrees to radians  
`camera.rotation.y = 90 * THREE.Math.DEG2RAD;`

---

<div class="post-metadata">

**Author:** ![Gabriel](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@Gabriel](https://discourse.threejs.org/u/Gabriel)\
**Post date:** [December 2, 2019, 6:27pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/3 "2019-12-02T18:27:52Z")

</div>

First I get the camera where I want on the model:

```
    var targetVector = new THREE.Vector3(20.05189148109836, 0.8128237235370566, -1.0318133098417155);
    var positionVector = new THREE.Vector3(9.492252384559986, 0.8128237235370566, -1.0318133098417155);
    var upVector = new THREE.Vector3(0, 0, 1);
    nav.setTarget(targetVector);
    nav.setPosition(positionVector);
    nav.setCameraUpVector(upVector);

```

This works fine, the camera goes to where I want.

Here are some const:

```
      const angle = 90;
      const theta = angle * Math.PI / 180; //Angle in radians

```

Now I need to rotate the camera 90 degrees to the right…

```
    var posX = new THREE.Vector3(1, 0, 0);
setTimeout(function () { //Start the timer
  //var axis = new THREE.Vector3(1, 0, 1);
  const matrix = new THREE.Matrix4().makeRotationAxis(posX, theta);
  targetVector.setX(targetVector.x + 45);
  targetVector.applyMatrix4(matrix);
  nav.setTarget(targetVector);
  //nav.

}.bind(this), 1000);

```

This doesn`t work… I tried your code too, but it does nothing… Probably because of the Forge encapsulation of the camera…

Now I’m trying something with quartenions… Oh my god why this is so hard?

---

<div class="post-metadata">

**Author:** ![Fyrestar](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/fyrestar/32/52793_2.png) [@Fyrestar](https://discourse.threejs.org/u/Fyrestar)\
**Post date:** [December 2, 2019, 6:35pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/4 "2019-12-02T18:35:02Z")

</div>

Im not sure what is going on in your code, what is `nav`? Did you tried  
`camera.rotateY( 90 * THREE.Math.DEG2RAD )`

---

<div class="post-metadata">

**Author:** ![Gabriel](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@Gabriel](https://discourse.threejs.org/u/Gabriel)\
**Post date:** [December 2, 2019, 6:37pm UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/5 "2019-12-02T18:37:45Z")

</div>

That`s a navigation object used by the forge viewer (the forge viewer uses threejs), that`s why i need to use their object structure and probably that`s why your code doesn`t work with me =/

---

<div class="post-metadata">

**Author:** ![Gabriel](https://avatars.discourse-cdn.com/v4/letter/g/9de0a6/32.png) [@Gabriel](https://discourse.threejs.org/u/Gabriel)\
**Post date:** [December 3, 2019, 11:03am UTC](https://discourse.threejs.org/t/how-to-make-the-camera-face-90-degrees-to-left-right-up-down/11165/6 "2019-12-03T11:03:16Z")

</div>

Trying this:

```
const angle = 90;
const theta = 5* angle * (Math.PI / 180);
var posX = new THREE.Vector3(-1, 0, 0).normalize();
var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle(posX, theta);
targetVector.applyQuaternion(quaternion);
viewer.navigation.setView(positionVector, targetVector);

```

The camera goes a little to the right (10 degrees maybe?)… But it also goes a little up (2 degrees maybe).

That is what I want, basically now I just need to go ONLY 90 degrees to the direction I want.

Any thoughts?