How to limit max and min zoom in THREE.OrbitControls with THREE.OrthographicCamera

Hi There,

How to limit zoom in and out when using THREE.OrbitControls, already tried with

controls.minDistance = 1;
controls.maxDistance = 2;

But have no luck, and i just tried it with

function update() {
  	if(camera.zoom >= 1.5){
  	 	camera.zoom = 1.5;
  	 if(camera.zoom <= 0.5){ 
  	 	camera.zoom = 0.5;

But it looks like not smooth as well, i mean when you use android phone browser it will bounce when zoom touches the limit. try it.

Live implementation:

Any clue will be appreciated, thank you


Instead of using OrbitControls.minDistance and OrbitControls.maxDistance (which is intended for perspective cameras), use OrbitControls.minZoom and OrbitControls.maxZoom.

1 Like

looks i just implement your code in my app, the zoom got limited but somehow when i changed the value in min max i got the same results of zoom limit?

Got it, i just read the docs that minZoom and maxZoom value is float

1 Like