orbitcontrols.js：如何放大/缩小答案

【问题标题】：orbitcontrols.js: How to Zoom In/ Zoom Outorbitcontrols.js：如何放大/缩小
【发布时间】：2017-05-03 02:09:20
【问题描述】：

使用 orbitcontrols.js（和 THREE.js），我想在代码中实现与旋转鼠标滚轮相同的效果。例如，我想调用类似 camera.zoomIn() 并让它向目标移动设定的距离。有人知道怎么做吗？

【问题讨论】：

标签： javascript three.js

【解决方案1】：

您可以在OrbitControls.maxDistance 和OrbitControls.minDistance 上设置值，以编程方式放大和缩小。

例如，如果您想使用 gsap 设置缩小动画，您可以执行以下操作：

gsap.to(myOrbitControls, {
    minDistance: 20, // target min distance
    duration: 1,
    overwrite: 'auto',
    ease: 'power1.inOut',
    onComplete: () => {
        myOrbitControls.minDistance = 0 // reset to initial min distance
    },
})

【讨论】：

【解决方案2】：

至少对于简单的情况，您可以更改相机的位置（例如将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

【讨论】：

您好，先生，您的回答太棒了。谢谢！

【解决方案3】：

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

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

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

【讨论】：

谢谢克里斯，你的意思是这个 var controls = new THREE.OrbitControls(camera, renderer.domElement);其次是类似的东西 controls.dollyIn(.5);正确的？我得到一个对象不支持属性或方法错误。我已经尝试了我想象的所有组合，包括直接调用 dollyIn，因为它不是 OrbitControls 对象的成员，而且我总是得到相同的结果。