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

Question

我开始了解 ThreeJS 以及它带来的所有乐趣。我正在使用带框架的 ThreeJS。这个当前任务需要用 ThreeJS 计算，所以我可以将位置和旋转传递给 aframe 组件。我读过其他帖子，但大多数都是 C++。我可以按照代码进行操作，但它们似乎没有使用四元数或 ThreeJS。

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

// 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 的四元数属性始终相同。我知道到那时有些事情搞砸了。

回顾一下我的问题：

1. 为什么不管提供的 x、y、z 值如何，四元数总是相同的？
2. 如何让四元数实际成为旋转相机所需的旋转？
3. 如何从 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可以做任何四元数做的事情。