三.js轨迹球控制无滚动

标签 three.js

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

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

轨道控制接近我正在寻找的,但没有平移的能力。

有什么帮助吗?

最佳答案

自从问这个问题已经有一段时间了,但我遇到了同样的问题并且在网上没有找到太多讨论,所以我想我会发布我的解决方案。

如果您必须使用 TrackballControls 并且想要平坦的地平线,则可以通过将以下行添加到“this.rotateCamera”方法的末尾来简单地编辑 TrackballControls.js 库

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

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轨迹球控制无滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12838308/

相关文章:

javascript - 如何在 THREE.js 中获取被点击的元素

Three.js 抗锯齿,盒子几何还是很不清晰

javascript - Three.js 抗锯齿不适用于 Chrome

javascript - 将三个js的IIFE函数转换为es6?

javascript - A 帧 Raycaster 不工作(需要与天空的交点)

javascript - 三.js CanvasRenderer问题

3d - Three.js - 翻译与移动?

three.js - JSON 模型格式是否更适合 THREE.js

three.js - 将交互式模型从 Sketchup 导出到 three.js

import - 如何使用三个JS导出然后导入场景?