Question

我正在场景中使用轨迹球控件，我想实现一个旋转相机的功能，就像在画布中拖动鼠标一样。我怎么能做到这样的事情？我一直在寻找轨迹球控制模块的代码，但我找不到要开始的东西。

编辑：我一直在寻找几个页面，三个文档和诸如此类的东西，但仍然无法重现轨迹球样式的旋转。我一直在使用四元数，但它们无法重现行为（或者我很遗憾，很可能）。有什么帮助吗？

编辑2：我正在寻找的是一种做这样的事情的方法：

function rotateCam(angle) { // code }

var angle = 0.01; //some value
rotateCam(angle);
$('#button').addEventListener('mousedown', function() { rotateCam(angle); } );

其中button是表示按钮的HTML元素。

Answer 1

我注意到轨迹球控制除了通过四元数旋转之外，还进行缩放以校正一些距离。我试着阅读代码，并得到了这个：

function rotate(L) {
    var vector = controls.target.clone();
    var l = (new THREE.Vector3()).subVectors(camera.position, vector).length();
    var up = camera.up.clone();
    var quaternion = new THREE.Quaternion();

    // Zoom correction
    camera.translateZ(L - l);

    quaternion.setFromAxisAngle(up, 0.015);
    camera.position.applyQuaternion(quaternion);
    camera.lookAt(vector);
    renderer.render(scene, camera);
}

像魅力一样......希望有人发现这个也很有用。 ;）

Answer 2

function cameraRotate(distance, angle){

            camera.position.x = distance * Math.cos( angle );
            camera.position.z = distance * Math.sin( angle );

}

这将使您的相机以场景周围的指定距离和角度旋转。如果你想要一个平滑的旋转你可以通过动画循环小角度增加来调用它，具体取决于输入。

Answer 3

我认为我正确的方式......我这样做了：

function rotate() {
    if (this.showCase) {
        var vector = controls.target.clone(); // controls is a TrackballControls
        var up = camera.up.clone();
        var quaternion = new THREE.Quaternion();
        quaternion.setFromAxisAngle(up, 0.015);
        camera.position.applyQuaternion(quaternion);
        camera.lookAt(vector);
        renderer.render(this.scene, this.camera);
    }
},

尽管如此，它看起来并不像TrackballControls那样正确。

THREE.js - 像轨迹球控件一样旋转相机

3 个答案: