Orbitcontrols messes up default camera position

Questions
, ,
1

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/

Expected Result: (camera up is (0,1,0))
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

2

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

3

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

4

Hi @Mugen87

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

Something is not right.

5

TBH, the code setup was a bit confusing. It feels okay with this fiddle: 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.
1 Like
6

Hi @Mugen87,

Thanks for the prompt reply.

It works great on your fiddle :slight_smile: 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!

7

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

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

1 Like
8

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? :frowning:

Regards
Srinivas

9

Sorry, no idea why it’s not working :man_shrugging: .

1 Like
10

No issues. I will have to nail this to the bone :sob: :sob:

Appreciate your time!

11

@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/

Regards,
Srinivas

12

@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:

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 )

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