三.js如何使用四元数旋转相机答案

【问题标题】：Three.js How to use quaternion to rotate camera三.js如何使用四元数旋转相机
【发布时间】：2012-07-24 19:39:34
【问题描述】：

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

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

【问题讨论】：

请注意，在较新的 THREE.js 版本中，useQuaternion 已被删除。该库现在默认使用四元数。
另请注意，今天（2015 年 8 月）三个 Camera 对象有一个方法 .lookAt(vector3) - 它接收一个 Vector3 与要查看的对象的位置。您可以传递任何 object3d.position 作为参数，以便相机查看它。看看：threejs.org/docs/index.html#Reference/Cameras/Camera

标签： javascript three.js

【解决方案1】：

我认为这条线行不通：

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

你需要设置

obj.useQuaternion = true

将对象添加到场景后，旋转时会自动应用到obj.quaternion。

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

【讨论】：

我想让相机旋转并聚焦在对象上。相机将围绕对象移动。所以我认为相机会受到控制。我错了吗？
看起来我是在黑暗中找到的，因为没有关于此的文档或示例:(。你能解释一下函数 slerp 吗？参数是什么？我试过你的建议但没有成功。
请注意，在较新的 THREE.js 版本中，useQuaternion 已被删除。该库现在默认使用四元数。

【解决方案2】：

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

希望这会对您有所帮助。别打扰我也花了几周的时间制作完美的相机跟踪。

【讨论】：

嗨，在文档中，.slerp 只有 2 个参数...threejs.org/docs/#Reference/Math/Quaternion...Did我误解了什么？
@SébastienGarcia-Roméo 在四元数上有两种 slerp 方法——这个答案中使用的一种是静态方法。两者都在quaternion docs page上列出，但静态方法在底部。

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

【讨论】：

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

【讨论】：

【解决方案5】：

这就是我的做法：

获取相机的当前四元数（initialQuaternion）
为您的相机创建一个克隆
使用 lookAt 方法使克隆查看目标
问题是，相机的 lookAt 方法实际上会使其看起来远离目标，因此您有两个选择：i>

要么直接使用lookAt方法，然后反转旋转
或者计算目标应该有的位置，这样当你离开它时，你实际上看向了正确的方向

获取克隆的新四元数（targetQuaternion）
通过使用动画循环，在 initialQuaternion 和 targetQuaternion 之间执行 slerp

【讨论】：