Search code examples
javascriptmatrixthree.jsrotationquaternions

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

I am starting to learn about ThreeJS and all of the fun that is to be had with it. I am using ThreeJS with aframe. This current task needs to be computed with ThreeJS so I can pass a position and a rotation to the aframe component. I have read other posts but most of them are C++. I can follow the code but they do not seem to be using quaternions or ThreeJS.

I have a camera at 0,0,0 that I want to rotate towards a specific point in space. Eventually, there will be many points and they will be saved, loaded, edited by a user. The matrix array seems like a good way to save this information. When a point is selected, I need to rotate the camera so it is facing in that direction. The end user has the ability to change the active point and thus change the rotation of the camera.

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

Am I going about this the correct way? The quaternion properties for x, y, z, and w are always the same. I know something is messed up by that point.

To recap my question:

  1. Why is the quaternion always the same regardless of the x, y, z values supplied?
  2. How do i get the quaternion to actually be the rotation needed to rotate the camera?
  3. How do I get that rotation out of a Matrix4?

This has been a long couple of days trying to understand this. So all apologies if I am missing something simple.

Thanks,

Jordan

Solution

  • If you just want the camera to face your point, there is a function in three.js, camera.lookAt(point). if you want to get the rotation but not rotating the camera, you can use these code:

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

    Now the rotation would be the rotation from camera to your target point, you know that rotation's type is THREE.Euler, so, you can set the rotation by using THREE.Euler.setFromRotationMatrix().

    I don't know quaternion well, actually, the quaternion implemented with the matrix4 in three.js. I think matrix4 can do anything the quaternion do.