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

Three.js How to use quaternion to rotate camera

本文关键字：旋转 相机 四元数 何使用 js Three      更新时间：2024-02-21

在Three.js中，我想使用THRE.四元数使相机对象旋转到选定对象。

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

我用以下代码碰碰运气：

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

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

回转非常容易。它需要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();

希望这能对你有所帮助。别担心，我也花了几个星期的时间来拍摄完美的镜头。

您可以使用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

我认为这一行不起作用：

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

您需要设置

obj.useQuaternion = true

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

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

我就是这样做的：

  1. 获取相机的当前四元数（initialQuaternion）
  2. 创建相机的克隆
  3. 使用lookAt方法使克隆查看目标
  4. 问题是，相机的lookAt方法实际上会让它看起来远离目标，所以你有两个选择：
  • 直接使用lookAt方法，然后反转旋转
  • 或者计算目标应该有的位置，这样当你远离它时，你实际上会朝着正确的方向看
  1. 获取克隆的新四元数（targetQuaternion）
  2. 通过使用动画循环，在initialQuaternion和targetQuaternion之间进行旋转

我试过使用它：

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

然而，我没有得到想要的结果。我知道这是一个相当古老的帖子，但如果有人能回复我，我会很高兴。除此之外，我没有看到任何其他相关的帖子，所以我真的希望有人能回应。

下面是我的详细问题：旋转相机以查看three.js 中的选定对象

相关文章：