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

Questions
,
1

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 ?

2

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

3

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

4

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

5

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:

Demo: https://jsfiddle.net/5aLhoypj/1/

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
6

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

7

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

2 Likes
8

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;
        canvas.dispatchEvent(evt);
    }));

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

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