For my project, I am implementing a rotating cube panorama image with 6 sides:
Check out the example here View the code on GitHub
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 0.1, 100 );
camera.position.z = 0.01;
var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1, 1, 1 ), materials );
skyBox.geometry.scale( 1, 1, - 1 );
scene.add( skyBox );
The cube consists of 6 sides: FRONT, BACK, LEFT, RIGHT, BOTTOM, TOP.
By using THREE.Raycaster, I am able to detect the current cube side as the user rotates around the panorama cubes using intersectObjects.
However, upon initial load of the panorama, I want to be able to set any specified cube side (FRONT, BACK, LEFT, or RIGHT) as the starting point. For instance, if I always get the BACK side initially, I would like to have the flexibility to force it to the FRONT, LEFT, or RIGHT side based on user settings.
So far, I have not been able to find a straightforward way to achieve this other than potentially adjusting THREE.Camera.position.y. Setting the correct value for it should align to the side's center accurately. If this is the correct method, how can I calculate this value accurately?