轨道控制.js：如何放大/缩小

Question

使用orbitcontrols.js（与THREE.js），我想在代码中实现与旋转鼠标滚轮相同的效果。例如，我想调用像 camera.zoomIn() 这样的东西，让它朝着目标移动一个设定的距离。有人知道怎么做吗？

Answer 1

至少对于简单的情况，您可以更改相机的位置（例如乘以x和y一个z因子），这会自动更新OrbitControls.

带滑块的示例<input type="range">：

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

Answer 2

通过查看源代码，您可以在对象上调用.dollyIn(dollyScale)and 。.dollyOut(dollyScale)OrbitalControls

编辑：这些不是公共方法；不过，人们可以通过编辑来访问它们OrbitalControls.js。

我添加了this.dIn = dollyIn;该THREE.OrbitControls功能，现在可以通过从外部调用来放大controls.dIn(1.05); controls.update();。