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

【问题标题】：THREE.js - Rotate the camera just like trackball controlsTHREE.js - 像轨迹球控件一样旋转相机
【发布时间】：2013-07-25 15:31:57
【问题描述】：

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

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

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

function rotateCam(angle) { // code }

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

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

【问题讨论】：

难道你不能点击轨迹球按钮然后移动轨迹球来获得同样的效果吗？
我需要在没有鼠标的情况下完成。

标签： javascript three.js

【解决方案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);
}

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

【讨论】：

1 char L 的参数会降低代码的可读性
什么是 L？（宝贝不要伤害我，不要伤害我，不要再伤害我了）。你想旋转多少？也许是绝对的新角度？
我不谴责原因最终重要的是：工作软件。但在我个人看来，可读性与品味无关......

【解决方案2】：

function cameraRotate(distance, angle){

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

}

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

【讨论】：

如果相机没有看 (0, 0, 0) 怎么办？如果它围绕 X、Y 和/或 Z 旋转？这些是在 TrackballControls 轮换中解决的情况。
我仍在奖励你，因为毕竟你是唯一感兴趣的人。谢谢队友；）

【解决方案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 旋转那样正确。

【讨论】：