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..


For those who can not or do not want to manipulate the library, the mentioned programmatical wheel event could look like this:

    //canvas object of my ThreeJS scene/a wrapper around it
    export const canvas = document.getElementById('canvas');

     * Zoom in and out inside the model
    const evt = new Event('wheel', {bubbles: true, cancelable: true});
    const zoomInBtn = document.querySelectorAll('.zoom_in');
    zoomInBtn.forEach(btn => btn.addEventListener('click', () => {
        console.debug('zoom in')
        evt.deltaY = -240;

    const zoomOutBtn = document.querySelectorAll('.zoom_out');
    zoomOutBtn.forEach(btn => btn.addEventListener('click', () => {
        console.debug('zoom out')
        evt.deltaY = +240;

It may not be pretty but it works and it took me too much time to try all the deprecated ideas of others.