orbitcontrols.js: How to Zoom In/ Zoom Out

Question

Using orbitcontrols.js (with THREE.js), I want to achieve the same effect in code as rotating the mouse wheel. For example, I want to call something like camera.zoomIn() and have it move a set distance toward the target. Anyone know how to do this?

Answer 1

At least for simple cases, you can change the position of the camera (e.g. multiply x, y and z by a factor), which automagically updates the OrbitControls.

Example with a <input type="range"> slider:

zoomer.addEventListener('input', function(e) {
    var zoomDistance = Number(zoomer.value),
        currDistance = camera.position.length(),
        factor = zoomDistance/currDistance;

    camera.position.x *= factor;
    camera.position.y *= factor;
    camera.position.z *= factor;
});

https://codepen.io/Sphinxxxx/pen/yPZQMV