Issue Aligning Faces In Three.js From Two Seperate Objects

I'm having an issue in my three.js code. I am trying to align two objects by selecting two faces and have the second face (and object) rotate to match the normal vector of the firs

Solution 1:

I found the issue in my code, I hope it can help somebody in the future. The

object.lookAt(worldNormalRef); 

needs instead to be modified to add the new face normals to the current object's postition for the lookAt to function correctly:

//create a point to lookAtvar newPoint = new THREE.Vector3(
    object.position.x + worldNormalRef.x,
    object.position.y + worldNormalRef.y,
    object.position.z + worldNormalRef.z
);

object.up = face.normal;//Z axis upobject.lookAt(newPoint ); 

Also note that the object.up should be set as above to the face.normal (the face I want to align to the reference object's face), and not to the worldNormal set above (I will delete this part of my code).