2

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

编辑：我一直在看几页，三个文档等等，但仍然无法重现轨迹球风格的旋转。我也一直在使用四元数，但它们无法重现行为（或者我很可能遗漏了一些东西）。有什么帮助吗？

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

function rotateCam(angle) { // code }

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

button代表按钮的 HTML 元素在哪里。

4

3 回答 3

3

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

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

像魅力一样工作......希望有人也觉得这很有用。;)

于 2013-08-19T16:20:11.917 回答
1 
function cameraRotate(distance, angle){

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

}

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

于 2013-08-18T13:20:02.223 回答
0

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

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 旋转那样正确。

于 2013-08-14T21:58:50.953 回答