I am crating panoramic viewer which will have 3D model and panorama images loaded at certain hotshot position within model and when user click on that hotspot view will be switch from 3D to panorama and camera will move in 360 degree view. [i.e you are standing on tower and looking by circling on one place in 360 view]
I want your help in moving camera in 360 view at any XY,Z location.
I have working solution and i works when My model is Y-UP. but it does not when Model Is Z-UP
Here is the link to live code
Y-UP model loaded
you will see model with one sprite/hotspot created at certain position. Press m key and camera will move to that sprite / hotspot position then press s key and now camera enters spherical view or pano view and now move the camera it will move in 360 view and its position is hotspot/sprite position.
here is the code for moving camera in spherical way
function switchToSphericalView() {
const direction = new THREE.Vector3();
camera.getWorldDirection(direction);
const lookAtPoint = camera.position.clone().add(direction);
controls.enableZoom = false;
controls.pan = false;
controls.target = lookAtPoint;
controls.update();
return;
}
Basically what I have done i am just checking where camera currently is looking and setting that point as target and then when we move camera it will move in 360 view.
But now When My model is Z-UP this does not work. to tackle model Z-UP while setting spherical view I am calculating one outward vector from center of model to the model outside this is done because model orientation is not upright. so I want camera to orient in such way when we rotate it should be same as Y-UP model
here is the link to live code .Z-UP model
Just press m camera will move to the hotspot position and then press s to start spherical view
please tell me if you want more explanation.
suggest me how to do this so I can make this generic for all models irrespective of their orientation.