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
http://jsfiddle.net/5u4wst30/
Probably this is an example of smooth zoom
Here it works like in Sketchfab
@mrdoob A
.smoothZoomUpdate()
method was added to the local copy ofOrbitControls
. Callingcontrols.update()
is also required in the render loop.On macOS, the mouse has built-in inertia, so this change is not required.
FWIW, model viewer also uses its own implementation of the orbit controls: https://github.com/google/model-viewer/blob/master/packages/model-viewer/src/three-components/SmoothControls.ts
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)
Then whenever you call controls.update(), you need to sync the TrackballControl’s target with the OrbitControls target