OrbitControls: How to zoom smoothly

Description of the problem

I use OrbitControls to control camera, and I set

    controls.enableZoom = true;
    controls.zoomSpeed = 1.2;

but when the camera zooming , it can’t zooming like sketchfab’s model , it is not so smooth. how to fix it?

Three.js version
  • [x ] r89
Browser
  • All of them
  • Chrome
  • Firefox
  • Internet Explorer
OS
  • All of them
  • Windows
  • macOS
  • Linux
  • Android
  • iOS
Hardware Requirements (graphics card, VR Device, …)

Author: Fantashit

4 thoughts on “OrbitControls: How to zoom smoothly

  1. @unilimes what did you change?

    @mrdoob A .smoothZoomUpdate() method was added to the local copy of OrbitControls. Calling controls.update() is also required in the render loop.

    On macOS, the mouse has built-in inertia, so this change is not required.

  2. TrackballControls supports smooth zooming, so my solution was to use a combination of both.

    For OrbitControls disable zooming but enable panning/rotating. For TrackballControls, do the opposite (enable zooming, disable panning, rotating)

    	// https://threejs.org/docs/#examples/en/controls/OrbitControls
    	this._controls = new OrbitControls(this._camera, this._renderer.domElement);
    	this._controls.enableDamping = true;
    	this._controls.dampingFactor = 0.1;
    	this._controls.screenSpacePanning = true;
    	
    	this._controls.enableZoom = false;
    	
    	this._controls.rotateSpeed = 0.5;
    
    	this._controls.minDistance = 100;
    	this._controls.maxDistance = 500;
    	
    	
    	
    	this._controls2 = new TrackballControls(this._camera, this._renderer.domElement);
    	this._controls2.noRotate = true;
    	this._controls2.noPan = true;
    	this._controls2.noZoom = false;
    	this._controls2.zoomSpeed = 1.5;
    	this._controls2.dynamicDampingFactor = 0.2; // set dampening factor
    	this._controls2 = controls;
    

    Then whenever you call controls.update(), you need to sync the TrackballControl’s target with the OrbitControls target

    	let target = this._controls.target;
            this._controls.update();
    	this._controls2.target.set(target.x, target.y, target.z);
    	this._controls2.update();
    

Comments are closed.