Three.js如何使用四元数来旋转相机

Question

在Three.js中,我想使用THREE.quaternion使相机对象旋转到所选对象.

我确实在网上搜索,但没有找到关于如何使用这个四元数类的示例/演示或文档.

我试试以下代码:

    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.y = 10;
    camera.position.z = 0;
    camera.position.x = radious;
    camera.useQuaternion = true;

   // I did use the TrackballTrackballControls. Maybe it causes the problem so I put it here
    controls = new THREE.TrackballControls( camera, document.getElementById(_canvasElement) );

    // function to make the camera rotate to the object
    function focusOn3DObject(obj){  
        obj.useQuaternion = true;
        obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);

        var newQuaternion = new THREE.Quaternion();
        THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.07);
        camera.quaternion = newQuaternion;
    }

但它不起作用.我错过了什么？请帮忙.提前致谢.

Answer 1

Slerp非常简单.它需要4个参数:

• targetRotation 实际的相机旋转
• destinationRotation 对象旋转
• destinationRotation 新的四元数将是新的相机旋转
• percentOfRotation 这个参数是游乐场,我现在在这里使用0.07,可以是0(0%)和1(100%)之间的值

这是我的轮换方法:

var qm = new THREE.Quaternion();
THREE.Quaternion.slerp(camera.quaternion, destRotation, qm, 0.07);
camera.quaternion = qm;
camera.quaternion.normalize();

希望这会对你有所帮助.并且不要打扰我也会在完美的相机上工作几周.

Answer 2

我认为这条线行不通：

obj.quaternion = new THREE.Quaternion(obj.position.x, obj.position.y, obj.position.z, 1);

你需要设置

obj.useQuaternion = true

将对象添加到场景后，当您旋转时，它将自动应用于obj.quaternion.

第二点是您应该将对象应用到控件而不是相机。因为你想控制物体而不是相机？