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。

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

Answer 3

您可以使用ThreeJs中的applyQuaternion方法

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

 camera.applyQuaternion(quaternion); // Apply Quaternion

 camera.quaternion.normalize();  // Normalize Quaternion

Answer 4

我尝试使用它：

    var newQuaternion = new THREE.Quaternion();
        THREE.Quaternion.slerp(camera.quaternion, obj.quaternion, newQuaternion, 0.01);
        camera.quaternion = newQuaternion;
        camera.quaternion.normalize();
        camera.matrixAutoUpdate();

但是，我未能获得理想的结果。我知道这是一个相当老的帖子，但是如果有人可以回应我会很高兴。除此以外，我没有看到其他任何相关的帖子，因此我非常希望有人回应。

这是我的详细问题：Rotate camera to look at Selected object in three.js

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

4 个答案: