How about using a matrix? I think v1 is your point of view, and looking at v2. matrix is a good way to show orientation. The Euler angle is another interpretation of orientation.
My idea is to create a transformation matrix from the space of objects to world space, what you want to do can be transferred in three stages:
- in the beginning, the camera is in world space, the rotation of the camera
(0,0,0) world space is the same as the space of the object. v1'(0,0,0) . - we translate the camera to
v1(3.296372727813439,-14.497928014719344,12.004105246875968) , the space of the object has an offset with world space, but the axis of the space of the object are parallel to the world space axes, the camera rotation is still (0,0,0). - we look at camera
v2 , as you can see, the change in the camera will change.
If I can build a transformation matrix representing all the actions above, I can get the orientation.
- First, calculate the translation matrix: since the translation is an affine transformation, we need to use a 4x4 matrix to represent the translation. we can easily get the matrix:
we use the base axis to get the rotation matrix.
You may need to set the camera vector up. the default is (0,1,0) . in object space, the z axis can be calculated through v1-v2 .
z = (v1.x-v2.x,v1.y-v2.y,v1.z-v2.z).normalize()
basis x : we know that the base vector is a vector perpendicular to the z-up plane, we get the vector x and z .
x = up.crossproduct(z)
basis y , y is perpendicular to the zx plane.
y = z.product(x)
we can construct the rotation matrix as a 3 x 3 matrix:
then finally get the transformation matrix:
we can use a matrix representing the orientation of the camera. if you need Euler angle or quaternion. there are some ways to convert between them. You can find in this book: 3D Math Primer for Graphics and Game Developers
Three.js implements the LookAt() function in the same way as my method.
Here is the source code for three.js, and I am adding a few comments:
function lookAt( eye, target, up ) //eye : your camera position; target : which point you want to look at; up : camera up vector { if ( x === undefined ) { x = new Vector3(); y = new Vector3(); z = new Vector3(); } var te = this.elements;
You can implement Matrix with a list like thrash .js.
I also have another idea - a system of spherical polar coordinates. Spherical coordinates are always marked as (r, Θ, Φ), Θ is the rotation angle, and Φ is the pitch angle. you need to convert the Cartesian coordinates v1 and v2 to spherical coordinates. because the second and third element are in a spherical corner, we can calculate the angular offset between v1 and v2. then make this offset as an addition to the rotation of the camera.
Here is my code (suppose you are of world origin (0,0,0)):
//convert v1 and v2 Cartesian coordinates to Spherical coordinates; var radiusV1 = Math.sqrt( Math.pow(v1.x) + Math.pow(v1.y) + Math.pow(v1.z)); var headingV1 = Math.atan2(v1.x , v1.z); var pitchV1 = Math.asin(-(v1.y) / radiusV1); var radiusV2 = Math.sqrt( Math.pow(v2.x) + Math.pow(v2.y) + Math.pow(v2.z)); var headingV2 = Math.atan2(v2.x , v2.z); var pitchV2 = Math.asin(-(v2.y) / radiusV2); //calculate angular displacement. var displacementHeading = headingV2 - headingV1; var displacementPitch = pitchV2 - pitchV1; //make this displacement as an addition to camera rotation. camera.rotation.x += displacementPitch; camera.rotation.y += displacementHeading;
By the way, 3D math is very useful and worth it to find out, the whole formula or concept that I'm talking about can be found in the book.
Wish that he helped you.