threejs : rotating panorama to look at camera direction

Question

I have two spheres on which panoramic image is mapped. I want to make smooth transition between 2 panoramas with fade effect. for both panorama I have initial camera direction set for best view. Now the issue is if user is looking at some camera angle in first panorama and then he clicks on some button to switch panorama I want to give fade effect and directly land on initial camera angle of another pano. But as both pano are sharing common camera, I cannot play with camera to achieve it so I devised following solution -

image depicting problem

1. rotate target sphere so that it looks at desired camera direction.
2. rotate target sphere so that it looks at existing camera direction.
3. fadeout source sphere.
4. camera look at new panos camera direction.
5. rotate back pano to initial orientation.

Here I am not able to find formula of rotating panorama to look at camera. (like camera is static and pano is rotated to achieve similar effect as if we are moving camera). Can somebody please help in finding formula to rotate pano(sphere) relative to camera.

Answer 1

Matrix is a very powerful tool to solve rotation problem. I made a simple to explain. At the beginning, the camera is in the center of the left sphere and face to initial viewpoint, then, the camera face to another point, now, the camera's rotation has changed, next, camera move to the center of the right sphere and keep its orientation. and we need to rotate the right sphere. If C is the point that we want to make the camera to face, first, we rotate A to B， second, we rotate some angle θ equal to C to A.

So, how to do like that? I used matrix, because A is an initial point, matrix in an identity matrix, and the rotation from A to C can be represented by a matrix, calculated by three.js function matrix4.lookAt(eye,center,up) which 'eye' is the camera position, 'center' is coordinate of C, and 'up' is camera up vector. Then, rotation matrix from C to A is the inverse matrix of the matrix from A to C. Because the camera is face to B now, so the camera's matrix equals to the rotation matrix from A to B.

Finally, we put it all together, the final rotation matrix can be written in:rotationMatrix = matrixAtoB.multiply(new THREE.Matrix4().getInverse(matrixAtoC));

jsfiddle example.

This way is a matrix way, you can also solve the problem with the spherical polar system.