Question

我在我的场景中使用OrbitControls.js，它在鼠标和触摸事件方面表现出色。

我想添加屏幕按钮以使用controls.dollyIn（scale）和controls.dollOut（scale）进行缩放。当我实现这个时，我得到controls.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（）但是为了旋转，所以屏幕上的按钮可以左/右/上/下触发旋转？

谢谢！

Answer 1

问题出在图书馆。 valueChanged(event: MatRadioChange) { console.log(event.value); //will log the value for the button you clicked }是dollyIn的私有功能。

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

THREE.OrbitControls

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

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

Answer 2

我很惊讶。我认为错误将更接近于无法调用未定义的dollyIn。我会确保你的范围链与var在与点击定义相同的块中建立：

var controls = new THREE.OrbitControls(camera, renderer.domElement);
//... controls setup code here ...//

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

Orbit Controls有rotateUp和RotateLeft。使用负数向下旋转或向右旋转。还有panUp和PanLet。我个人更喜欢用摇摆动画旋转相机，动画完成后我调用controls.update（）;它有点平滑。

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

2 个答案: