I am using Orbit controls and they have a weird limit.

Zooming depends on the radius of the spherical coordinates of the camera relative to the orbiting axis. I'll try to explain how it works:

Everytime the user scrolls, the value of scale changes in this magnitude:

(if the user zooms in)

scale *= Math.pow(0.95, scope.zoomSpeed)

(or if user zooms out)

scale /= Math.pow(0.95, scope.zoomSpeed)

Then, the radius value changes with each update like this: spherical.radius *= scale

Then the scale value is reassigned its default value scale = 1 so the radius won't change with each update

The value of spherical.radius is what determines how close you are at what the camera is looking at so, of course, you have a limit when zooming in because the radius can only get so little (see that zooming in multiplies the radius value by .95, so it gets closer to 0 everytime)

The problem is if you zoom close to the orbiting axis (spherical.radius ~= 0), then rotate the camera and look down (or up or wherever) you can’t zoom into that direction because spherical.radius can't be any smaller!

So, my question is, how can I achieve that behavior (zooming up or down when the radius is at its limit) using Orbit controls.

P.S. This code can be found in OrbitControl.js of the THREE.js library, more specifically in the this.update() function. Here's the github repo

I am using Orbit controls and they have a weird limit.

Zooming depends on the radius of the spherical coordinates of the camera relative to the orbiting axis. I'll try to explain how it works:

Everytime the user scrolls, the value of scale changes in this magnitude:

(if the user zooms in)

scale *= Math.pow(0.95, scope.zoomSpeed)

(or if user zooms out)

scale /= Math.pow(0.95, scope.zoomSpeed)

Then, the radius value changes with each update like this: spherical.radius *= scale

Then the scale value is reassigned its default value scale = 1 so the radius won't change with each update

The value of spherical.radius is what determines how close you are at what the camera is looking at so, of course, you have a limit when zooming in because the radius can only get so little (see that zooming in multiplies the radius value by .95, so it gets closer to 0 everytime)

The problem is if you zoom close to the orbiting axis (spherical.radius ~= 0), then rotate the camera and look down (or up or wherever) you can’t zoom into that direction because spherical.radius can't be any smaller!

So, my question is, how can I achieve that behavior (zooming up or down when the radius is at its limit) using Orbit controls.

P.S. This code can be found in OrbitControl.js of the THREE.js library, more specifically in the this.update() function. Here's the github repo

• javascript
• three.js
• 3d

Share Improve this question Follow edited Jun 16, 2018 at 6:50 LuisEgan asked Jun 16, 2018 at 6:13 LuisEganLuisEgan 1,02422 gold badges1414 silver badges2929 bronze badges 3

• are you talking about minzoom? please do share your code! question is not self-explanatory! – Ullas Hunka Commented Jun 16, 2018 at 6:17
• no, I'm not talking about the minzoom and there's actually no code of mine to add, I'm not doing anything particular, I could add a fiddle of the basic use of the controls. If you zoom in enough (with minzoom = 0 as default), zooming will get slower until you cant zoom, if you rotate the camera you'll still won't be able to zoom, regardless of the direction you are lookingAt – LuisEgan Commented Jun 16, 2018 at 6:29
• @UllasHunka the OrbitControls names are randomly assigned. Zoom doesn't have anything to do with actual zooming. Imagine i had a restaurant but instead of calling my dishes steak or stew i called them picture frame or car wheel. The question sounds confusing because of this i believe. But i think it's valid. – pailhead Commented Jun 16, 2018 at 12:58

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

I managed to solve this thanks to pailhead (thanks again!)

Added the following to the this.update() function in OrbitControls.js

To get the vector where the camera is looking at

var cameraWorldDir = new THREE.Vector3();
scope.object.getWorldDirection(cameraWorldDir);

Magic:

if (spherical.radius <= 2) {
    scope.target.add(cameraWorldDir.multiplyScalar(0.4));
}

So, if I ever get close enough to the center, I just move the target (orbiting center) along the lookAt vector, aka I push it back.

See the full thread in the threejs forum here

You might be confused by the terminology used in OrbitControls

What "zoom" refers to is called "dolly" in the real world. It's a device used to create camera movements:

https://en.wikipedia/wiki/Camera_dolly

In the real world, "zooming a camera" means something different: https://en.wikipedia/wiki/Zooming_(filmmaking)

It requires changing the focal length of the lens to make the field of view narrower or wider (how much of the world you capture on screen from the same vantage point).

When you hit the minZoom value, you haven't actually done any zooming, you've got as close as you can to your orbit center.

You could try to disable the "zoom" or dolly on the OrbitControls and try to implement your own controller for just changing the camera.fov (zoom).