Three.js OrbitControls.js - 使用按钮调用放大/缩小 - controls.dollyOut() 不是函数

我在我的场景中使用 OrbitControls.js，它在处理鼠标和触摸事件时效果很好。

我想使用controls.dollyIn(scale) 和controls.dollOut(scale) 添加屏幕按钮以进行缩放。当我实现这个时，我得到了 control.dollyIn 不是一个函数。

控制是全局性的

我正在设置 OrbitControls

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);

并触发缩放

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

任何关于如何实现这一点的建议将不胜感激。

另外，是否有类似于 dollyIn() 的东西但用于旋转，以便屏幕上的按钮可以触发向左/向右/向上/向下旋转？

谢谢!

最佳答案

问题出在图书馆。 dollyIn 是 THREE.OrbitControls 的私有(private)函数。

我们可以通过在 OrbitControls.js 中放入两个公共(public)方法来修改 THREE.OrbitControls 。有部分调用作为 公共(public)方法 。

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

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

您可以访问这些功能，如下所示:

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

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

如果你想增加缩放步长，可以通过

controls.zoomSpeed = 3.0;

关于Three.js OrbitControls.js - 使用按钮调用放大/缩小 - controls.dollyOut() 不是函数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39856907/