# Orbitcontrols messes up default camera position

**URL:** <https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065>\
**Category:** Questions\
**Tags:** orthographic-camera, orbit-controls, camera\
**Created:** [February 2, 2021, 12:45pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065 "2021-02-02T12:45:47Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 12:45pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/1 "2021-02-02T12:45:48Z")

</div>

Hi,

I need to use **OrbitControls** to rotate my drawing on **Z-axis**. From most of the articles that I have read on this forum and on google, it seemed like the only way to do this is to change the camera up vector to (0,0,1).

I have accordingly done this change but it seems like the OrbitControl changes the Orthographic camera’s default position during its first update.

Please check the **jsfiddle** :

Current Behaviour: (camera up is **(0,0,1)**)  
[https://jsfiddle.net/tsveLf6u/63/](https://jsfiddle.net/tsveLf6u/63/)

Expected Result: (camera up is **(0,1,0)**)  
[https://jsfiddle.net/tsveLf6u/64/](https://jsfiddle.net/tsveLf6u/64/)

Why changing the camera’s up vector cause Orbitcontrols to update the camera’s initial position here? I expect the camera to be positioned exactly in the place where it was set at startup.

Any help regarding this would be invaluable.

Thanks!

Regards,  
Srinivas

---

<div class="post-metadata">

**Author:** ![becky\_rose](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/becky_rose/32/15933_2.png) [@becky\_rose](https://discourse.threejs.org/u/becky_rose)\
**Post date:** [February 2, 2021, 12:59pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/2 "2021-02-02T12:59:58Z")

</div>

I’ve no time to look at the fiddle code but have you tried setting the controls.target property?

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 1:02pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/3 "2021-02-02T13:02:35Z")

</div>

Hi Becky,

Yes, I have set it right. You can check the expected result fiddle.

I have attached 2 fiddles, the only difference between them is the camera up vector

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 2:19pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/4 "2021-02-02T14:19:45Z")

</div>

Hi @Mugen87

Sorry to bother you here, but is there something really obvious here that I am missing. ?

Something is not right.

---

<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:** [February 2, 2021, 3:04pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/5 "2021-02-02T15:04:54Z")

</div>

TBH, the code setup was a bit confusing. It feels okay with this fiddle: [https://jsfiddle.net/0uL9bopw/1/](https://jsfiddle.net/0uL9bopw/1/)

A few notes:

- It’s sufficient to call `controls.update();` once in your app (right after changing the target).
- ~~There is no need to call `updateProjectionMatrix()`.~~
- Never configure the camera’s frustum with `window.innerWidth` and `window.innerHeight`. Use an aspect and frustum size property like in my fiddle.

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 5:35pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/6 "2021-02-02T17:35:21Z")

</div>

Hi @Mugen87,

Thanks for the prompt reply.

It works great on your fiddle 🙂 Pure magic.

Questions:

1. Don’t we have to call **updateProjectionMatrix** even after changing the camera.zoom value?

2. controls.update() being a one-time call was a new revelation to me. Is there no other time we need to update this ? Are there any use cases?

3. Ok, ill configure it the way you did.

Appreciate you getting back to me man.

Peace!

---

<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:** [February 2, 2021, 5:50pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/7 "2021-02-02T17:50:11Z")

</div>

> [@Srinivas\_Prabhu](#):
>
> Don’t we have to call **updateProjectionMatrix** even after changing the camera.zoom value?

It’s necessary in this case. Sorry, I’ve missed that line in your code.

> [@Srinivas\_Prabhu](#):
>
> controls.update() being a one-time call was a new revelation to me. Is there no other time we need to update this ?

When damping or auto-rotate is enabled you have to call `update()` in the animation loop.

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 6:19pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/8 "2021-02-02T18:19:20Z")

</div>

Hi @Mugen87,

Thanks for your response. I learnt a couple of new things today.

Although the fiddle does work with your changes, at the moment it **does not** seem to be working on my existing project.

The only difference between the fiddle and my project is that I see is that the vertex coordinates in my scene are really large, of the order of 100’s. I need to set my **far plane to at least 800units** (orthographic camera) before I start seeing the objects on the screen.

Right now, I still see the camera position being manipulated at startup. It has approximately rotated the whole scene by 26 degrees. (I know that is weird)

(PS: I did debug into **controls.update()** method and it seems like it adds a certain offset to my camera.position when first call update(). Also, a similar initial rotation happens for the perspective camera as well with the same project)

Does this remind you of anything unusual? Or am I on my own here? ☹

Regards  
Srinivas

---

<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:** [February 2, 2021, 6:25pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/9 "2021-02-02T18:25:15Z")

</div>

> [@Srinivas\_Prabhu](#):
>
> Does this remind you of anything unusual?

Sorry, no idea why it’s not working 🤷‍♂️ .

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 6:28pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/10 "2021-02-02T18:28:43Z")

</div>

No issues. I will have to nail this to the bone 😭 😭

Appreciate your time!

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 2, 2021, 6:38pm UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/11 "2021-02-02T18:38:54Z")

</div>

@Mugen87

I just realized that in the fiddle that you gave me, the X-axis is pointing upwards for some reason. Isn’t the smaller plane/mesh that we created as mesh2 supposed to be on the right?

Unless we rotate the camera the default orientation has to be X to the right/Y up isn’t it?  
Does changing the camera up vector have anything to do with this?

Also, with upvector (0,1,0) it seems to be in the right orientation  
[https://jsfiddle.net/pz5axwLk/](https://jsfiddle.net/pz5axwLk/)

Regards,  
Srinivas

---

<div class="post-metadata">

**Author:** ![Srinivas\_Prabhu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/srinivas_prabhu/32/12002_2.png) [@Srinivas\_Prabhu](https://discourse.threejs.org/u/Srinivas_Prabhu)\
**Post date:** [February 3, 2021, 9:32am UTC](https://discourse.threejs.org/t/orbitcontrols-messes-up-default-camera-position/23065/12 "2021-02-03T09:32:57Z")

</div>

@Mugen87

I was able to reproduce the issue that I am having on my side with **just 2 lines of changes** in the fiddle that you provided me yesterday.

Please check this out:

> **[three.js dev template - module - JSFiddle - Code Playground](https://jsfiddle.net/2efpL1yd/3/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

All I have changed to the example from yesterday is I have moved the camera 0.5 units in the Y direction and changed the Y component of the controls target accordingly.

Changes that were done:

> ```
> camera.position.set(5,0.5,10);
> controls.target.set(5,0.5,0);
> 
> ```

This gives us the scene that looks like this: (Feels like Isometric View )

> **[Gyazo](https://gyazo.com/3470348550fd21974606e54d705f4171)**
>
> Gyazo is the easiest way to record screenshots & videos you can share instantly. Save time with async visual communication that's effortless and engaging.

I have figured out what’s causing this, I just don’t understand the math/theory behind why this orientation change is happening.

Any help would be appreciated.

Regards,  
Srinivas