Perspective camera minDistance

Questions
1

Hi guys.

I don’t understand the minDistance for the Orbit Controls is scaling the model down and zoom does not work anymore, if I set the value to anything higher than 1 it does not work correctly, the maxDistance is working as it should.

I have no idea what I am missing…

2

Just tried it. Perspective camera + orbit controls + minimal distance 5 + maximal distance 15 … and it works as expected. Three.js r155.

Maybe something in your code is making a problem or maybe your expectation is different. BTW, orbit controls with perspective camera does not zoom – zooming is only for orthographic camera. What you see as zooming is a side effect of getting closer to the target.

Could you demonstrate the problem online?

3

Yes here is the project Start

It is under development so not preloaders and some stuff is missing.

The source code is here https://webdesign-flash.ro/ht/emv/src/fwdds.js , please search for this.controls.minDistance = 3 , you will see how I set up the Orbit Cotrols.

The maxDistance works as It should but the minDistance makes not sense the controls are stuck at Z = 3 it seams.

4

I meant some online debuggable code, so I can check values. Anyway, in this code:

this.zoomMaxDistance = 2;
:
this.controls.maxDistance = this.zoomMaxDistance;
this.controls.minDistance = 3;

it appears that minDistance is 3 and maxDistance is 2, which not normal and it forces the camera to get stuck.

Consider the following interpretation:

  • minDistance is how close the camera can go to the object
  • maxDistance is how far it can go away from the object

Thus, minDistance should be less than maxDistance. Try the following, just as an experiment:

this.controls.maxDistance = 10;
this.controls.minDistance = 2;
5

Thank you for your explanation.

I have added sliders in the GUI in the live settings it is working but I don’t fully understand how…

https://webdesign-flash.ro/ht/emv/

6

Thanks for adding the sliders. I checked the min/max distances of the camera and they work exactly as expected. Most likely you have different expectation, that’s why the outcome is surprising to you. What behavior do you expect?

In addition to the description of min/max distances in my previous reply, here is a picture. I hope it will make the situation more clear:

image
image1222×483 31.9 KB

1 Like
7

I am entering the 3D world and everything is strange to me I need time to adjust.

I was expecting more of a max zoom and min zoom but I see that works completely differently.

I learning slowly. this stuff is not easy :slight_smile:

Thank you for your help.

8

I am having trouble understanding the maxPolarAngle and minPolarAngle, I have added thejm in the live settings in the Orbital controls folder named Vertical rotation min angle and Vertical rotation max angle…

The minPolarAngle dose not seam to do anything, I really don’t understand this one.

Thank you!

9

The polar angle is the vertical angle of the camera. If you imagine the camera sitting on an imaginary sphere around the target object, the polar angle defines how the camera slides up or down (towards the poles).

The angles are measured from the “North Pole” via the “Equator” down to the “South Pole”.

If you work with radians (this is the almost default unit for angles in Three.js):

  • the polar angle is between 0 and π
  • the North Pole is 0 radians
  • the Equator is π/2 radians
  • the South Pole is π radians

If you work with degrees (they must be converted to radians)

  • the polar angle is between 0 and 180°
  • the North Pole is 0°
  • the Equator is 90°
  • the South Pole is 180°

The illustration below is for using degrees:

image

For your online demo, set the range of minPolarAngle and maxPolarAngle to be both [0°,180°].

Edit: Here is another illustration that makes better representation of “North Pole” and “South Pole”, when you work with degrees:

image

10

Got it!

Thank you again!

1 Like
11

I have another question it seems that you have experience with threejs so I apologize if this is too much, if you can’t answer I will create a different topic.

The goal of this project is to add markers like in this project Easy 360° Product Viewer

My question is how can I attach a ‘marker’ to a specific point on a model and most importantly how to update the ‘marker’ position if the model has an animation, for example, the model is a car and the ‘marker’ is attached to the car door, when the door opened via the model animation can the ‘marker’ update it’s position so that it stays in the same point keeping track of the animation visually.

Please let me know if you understand what I mean.

Thank you!