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是解决旋转问题的一个非常强大的工具。我做了一个简单的解释。 开始时，相机位于左侧球体的中心并面向初始视点，然后，相机面向另一个点，现在，相机的旋转已经改变，接下来，相机移动到右侧球体的中心并保持它的方向。我们需要旋转正确的球体。如果C是我们想让相机面对的点，首先，我们将A旋转到B，其次，我们将一个等于C的角度θ旋转到A.

那么，该怎么做？我使用矩阵，因为A是一个初​​始点，单位矩阵中的矩阵，从A到C的旋转可以用矩阵表示，由three.js函数matrix4.lookAt(eye,center,up)计算，其中'eye'是摄像机位置，'center'是C的坐标，'up'是摄像机向上矢量。然后，从C到A的旋转矩阵是从A到C的矩阵的逆矩阵。因为摄像机现在面向B，所以摄像机的矩阵等于从A到B的旋转矩阵。

最后，我们将它们放在一起，最终的旋转矩阵可以写成：rotationMatrix = matrixAtoB.multiply(new THREE.Matrix4().getInverse(matrixAtoC));

jsfiddle example

这种方式是矩阵方式，你也可以用球形极坐标系来解决问题。