How to add a Zoom In - Zoom Out button to a scene

I am trying to build simple controls buttons to view a 3D shape like “Zoom In”, “Zoom Out”.

It doesn’t seem possible to do it using orbitcontrols, unless I generate a mouse event programmatically to trick it.

Is there a better way ?

Just fiddle around with the orbitcontrols.JS, you can customize it to your liking quite easily

I was trying to avoid not being able to seamlessly update the library. Too bad it is not available straight out of the box within the Three.js project, it is a basic functionality

You’re talking about having to compile three.js?

It’s intended that the code from the examples should be adjusted according to project-specific requirements. It’s actually not complicated to enhance the public interface of OrbitControls with an API for your use case:


In this example, we introduce two new public methods zoomIn() and zoomOut(). They use existing logic in OrbitControls and can be easily invocated by your app’s event listeners.

1 Like

Yea, that’s exactly what I was about to suggest Mugen :blush:

There is actually a npm library that extend Orbit Controls and use TweenJs to provide smooth transition for camera movement. It’s called Camera Controls. I used it to create those simple interactions. Here is the link to the npm library : camera-controls - npm. And if you want to check examples of it running, you should check his github project where it provides you interesting demos : GitHub - yomotsu/camera-controls: A camera control for three.js, similar to THREE.OrbitControls yet supports smooth transitions and more features..

1 Like