orbitcontrols.js: How to Zoom In/ Zoom Out

问题

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?

回答1:

From looking at the source code you can call .dollyIn(dollyScale) and .dollyOut(dollyScale) on the OrbitalControls object.

Edit: these aren't public methods; one can access them by editing OrbitalControls.js though.

I added this.dIn = dollyIn; to the THREE.OrbitControls function, I can now zoom in by calling controls.dIn(1.05); controls.update(); from outside.

回答2:

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

来源：https://stackoverflow.com/questions/41198618/orbitcontrols-js-how-to-zoom-in-zoom-out