ThreeJS：获得旋转，使一个 vector3 将面对另一个 vector3

Question

我开始学习 ThreeJS 以及它带来的所有乐趣。我正在使用带有框架的 ThreeJS。当前任务需要使用 ThreeJS 计算，因此我可以将位置和旋转传递给 aframe 组件。我读过其他帖子，但其中大部分是 C++。我可以遵循代码，但他们似乎没有使用四元数或 ThreeJS。

我有一个位于 0,0,0 的相机，我想将其旋转到 space 中的特定点。最终，会有很多点，它们将被用户保存、加载、编辑。矩阵数组似乎是保存此信息的好方法。选择一个点后，我需要旋转相机使其朝向那个方向。最终用户可以更改活动点，从而更改相机的旋转。

// I want to get the rotation from the camera to the result of a raycast
const camera = new Vector3()
const cast = new Vector3(10, 0, -20)

// I created a quaternion from my vectors to 
// get the rotation from the camera to the cast
const quaternion = new Quaternion().setFromUnitVectors(camera, cast)
console.info('quaternion', quaternion.toArray())
// this is always [-0, 0, 0, 1] regardless of my x, y, z for cast

// I use the quaternion to create a new Matrix4
const matrix = new Matrix4().makeRotationFromQuaternion(quaternion)
// This is always the same
//  Makes sense since the quaternion is always the same
console.log(matrix.toArray())

const position = matrix.getPosition() // Vector3(0, 0, 0)
// This just creates another matrix
// I do not know how to get the rotation
const rotation = new Matrix4().extractRotation(matrix)

我这样做的方式正确吗？ x、y、z 和 w 的四元数属性始终相同。我知道到那时有些事情搞砸了。

回顾一下我的问题：

为什么不管提供的 x、y、z 值如何，四元数总是相同？
如何让四元数实际成为旋转相机所需的旋转？
如何从 Matrix4 中获取旋转？

为了理解这一点，我花了好几天的时间。所以，如果我遗漏了一些简单的东西，我们深表歉意。

谢谢，

约旦

Answer 1

如果你只是想让相机正对你的角度，three.js、camera.lookAt(point)中有一个功能。如果你想获得旋转而不是旋转相机，你可以使用这些代码：

    var matrix = new THREE.Matrix4();
    matrix.lookAt(camera.position,point,camera.up);
    var rotation = new THREE.Euler(0,0,0,"XYZ");
    rotation.setFromRotationMatrix(rotation);

现在 rotation 将是从相机到目标点的旋转，您知道旋转的类型是 THREE.Euler，因此，您可以使用 THREE.Euler.setFromRotationMatrix() 设置旋转。

我对四元数不是很了解，其实就是three.js中用matrix4实现的四元数。我认为 matrix4 可以做四元数做的任何事情。

ThreeJS：获得旋转，使一个 vector3 将面对另一个 vector3

ThreeJS: Getting the rotation so one vector3 will face another vector3

javascript

rotation

matrix

quaternions

three.js