Question

我开始了解ThreeJS以及与之相关的所有乐趣。我正在使用ThreeJS和aframe。当前任务需要使用ThreeJS计算，因此我可以将位置和旋转传递给aframe组件。我读过其他帖子，但大多数都是C ++。我可以遵循代码，但他们似乎没有使用四元数或ThreeJS。

我有一台0,0,0的摄像机，我想向空间中的特定点旋转。最终，将有许多点，用户将保存，加载和编辑它们。矩阵阵列似乎是保存此信息的好方法。选择一个点后，我需要旋转相机，使其朝向该方向。最终用户可以更改活动点，从而改变摄像机的旋转。

＆＃13;

// 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)

＆＃13;

我是否以正确的方式进行此操作？ 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，因此，您可以使用{{1}设置旋转}。

我不太了解四元数，实际上，四元数是用three.js中的matrix4实现的。我认为matrix4可以做四元数所做的任何事情。

ThreeJS：获得旋转所以一个vector3将面对另一个vector3

1 个答案: