ThreeJS:获得旋转,以便一个向量3将面对另一个向量3



我开始了解ThreeJS以及它所带来的所有乐趣。 我正在使用带有aframe的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. 如何从《黑客帝国4》中获取这种旋转?

这已经花了很长时间试图理解这一点。 因此,如果我错过了一些简单的东西,请道歉。

谢谢

约旦

如果你只是想让相机面对你的点,有一个功能在三.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()设置旋转。

我不太了解四元数,实际上,四元数在三.js中与矩阵4一起实现。我认为矩阵4可以做四元数做的任何事情。

最新更新