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

Question

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

编辑:我已经查看了几页，三份文档等等，但仍然无法重现轨迹球样式旋转。我也一直在使用四元数，但它们无法重现这种行为(或者我很可能遗漏了一些东西)。有帮助吗？

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

很有魅力...希望有人觉得这也很有用。 ;)