Three.js OrbitControls.js - invoking zoom in/out with button - controls.dollyOut() is not a function

Question

I am using OrbitControls.js in my scene and it's working great with mouse and touch events.

I would like to add on screen buttons to zoom using controls.dollyIn(scale) and controls.dollOut(scale). When I implement this I am getting controls.dollyIn is not a function.

controls is global

I am setting up OrbitControls with

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;
controls.autoRotateSpeed = 0.03;
controls.enableDamping = true;
controls.dampingFactor = 0.1;
controls.rotateSpeed = 0.1;
controls.minDistance = 1;
controls.maxDistance = 200;
controls.maxPolarAngle = Math.PI/2 - .04;
controls.target.set(0, 5, 0);

And triggering the zoom with

$( "#navZoomIn" ).click(function() {
    event.preventDefault();
    controls.dollyIn(4);
});

any suggestions on how to accomplish this would be much appreciated.

Also, is there something similar to dollyIn() but for rotation, so that on screen buttons could trigger rotation left/right/up/down?

Thanks!

Answer 1

The Problem is in library. dollyIn is a private function of THREE.OrbitControls.

We can modify OrbitControls.js by putting two public methods in THREE.OrbitControls. There is section calls as public methods.

this.dollyIn = function () {
    dollyIn( getZoomScale() );
    scope.update();
};

this.dollyOut = function () {
    dollyOut( getZoomScale() );
    scope.update();
};

You can access these function as shown below:

$("#product-container .canv-zoom-in").on("click", function() {
    controls.dollyOut();
});

$("#product-container .canv-zoom-out").on("click", function() {
    controls.dollyIn();
});

If you want zoom step to increase, it can be done by

controls.zoomSpeed = 3.0;

Answer 2

If you don't have access to OrbitControls class, or you don't want to manipulate/extend it, you can alternatively fire a mouse wheel event 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);
    }));