I am creating three.js application. I have loaded my STL objects. I have used 'OrbitControls'. When I start zoom my object with middle scroll button of mouse, it breaks at certain point.

My camera and controls code is as below:

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 15 );
                //camera.position.set( 3, 0.15, 3 );
                // position and point the camera to the center of the scene
                camera.position.x = -3;
                camera.position.y = 4;
                camera.position.z = 5;
                camera.lookAt(new THREE.Vector3(0, 0, 0));

controls = new THREE.OrbitControls( camera,  renderer.domElement  );
                controls.damping = 0.2;
                //controls.minZoom = 0;
                //              controls.maxZoom = 1;
                //controls .noZoom = true;

                controls.addEventListener( 'change', render );

I tried with controls minZoom and maxZoom but it does not work.

Can anyone please tell me how should I limit the zoom so that beyond certain point my object does not break?

I am creating three.js application. I have loaded my STL objects. I have used 'OrbitControls'. When I start zoom my object with middle scroll button of mouse, it breaks at certain point.

My camera and controls code is as below:

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 15 );
                //camera.position.set( 3, 0.15, 3 );
                // position and point the camera to the center of the scene
                camera.position.x = -3;
                camera.position.y = 4;
                camera.position.z = 5;
                camera.lookAt(new THREE.Vector3(0, 0, 0));

controls = new THREE.OrbitControls( camera,  renderer.domElement  );
                controls.damping = 0.2;
                //controls.minZoom = 0;
                //              controls.maxZoom = 1;
                //controls .noZoom = true;

                controls.addEventListener( 'change', render );

I tried with controls minZoom and maxZoom but it does not work.

Can anyone please tell me how should I limit the zoom so that beyond certain point my object does not break?

• javascript
• three.js

• You can set the camera near plane at 0.1 instead of 1. – gaitat Commented Feb 26, 2016 at 13:38

2 Answers 2

If you are using a PerspectiveCamera with OrbitControls, you can limit the camera distance like so:

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 10;
controls.maxDistance = 50;

Look at the source code OrbitControls.js for additional settings.

three.js r.74

For ReactJs

 import { OrbitControls } from '@react-three/drei'
 
 <OrbitControls minDistance={10} maxDistance={50} />