三.js轨迹球控制无滚动 [英] three.js trackball control without the roll

问题描述

有人知道是否/如何修改轨迹球控件以保持地平线水平，但仍允许您在对象周围和上方旋转吗?

Does anybody know if/how the trackball control can be modified to keep the horizon level but still allow you to rotate around and over an object?

通过将axis.x 和axis.z 设置为0，它会停止滚动，但也会停止在对象上旋转的能力.

By setting axis.x and axis.z to 0 it stops the roll but also stops the ability to rotate over the object.

轨道控制接近我想要的但没有平移的能力.

The orbit control is close to what I am looking for but does not have the ability to pan.

有什么帮助吗?

推荐答案

好久没问这个问题了，但是我遇到了同样的问题，网上也没有找到太多讨论，所以我想我会发布我的解决方案.

It's been awhile since this question was asked, but I ran into the same problem and didn't find much discussion online, so I thought I'd post my solution.

如果你必须使用 TrackballControls 并且你想要一个平坦的地平线，你可以通过在'this.rotateCamera'方法的末尾添加以下行来简单地编辑 TrackballControls.js 库

If you must use TrackballControls and you want to a flat horizon, you can simply edit the TrackballControls.js library by adding the following line to the end of the 'this.rotateCamera' method

this.object.up = new THREE.Vector3(0,1,0);这会在 (0,1,0) 方向(即 y 方向)锁定相机向上方向.整个修改后的方法函数将变为:

this.object.up = new THREE.Vector3(0,1,0); This locks the camera up direction in the (0,1,0) direction (i.e in the y direction). The entire modified method function would then read:

this.rotateCamera = function () {

var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );

if ( angle ) {

    var axis = ( new THREE.Vector3() ).crossVectors( _rotateStart, _rotateEnd ).normalize();
        quaternion = new THREE.Quaternion();

    angle *= _this.rotateSpeed;

    quaternion.setFromAxisAngle( axis, -angle );

    _eye.applyQuaternion( quaternion );
    _this.object.up.applyQuaternion( quaternion );

    _rotateEnd.applyQuaternion( quaternion );

    if ( _this.staticMoving ) {

        _rotateStart.copy( _rotateEnd );

    } else {

        quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
        _rotateStart.applyQuaternion( quaternion );

    }

}

// Lock the camera up direction
this.object.up = new THREE.Vector3(0,1,0);

};

这篇关于三.js轨迹球控制无滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！