13

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

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

4

5 回答 5

18

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

希望这会对您有所帮助。不要打扰我也为完美的相机工作了几个星期。

于 2012-08-06T13:53:27.000 回答
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
于 2018-12-20T23:11:27.537 回答
2

我认为这条线行不通：

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

你需要设置

obj.useQuaternion = true

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

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

于 2012-07-26T15:41:47.647 回答
1

这就是我的做法：

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

我试过使用它：

    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 see Selected object in three.js

于 2019-11-07T03:48:21.793 回答