I am new to threejs and trying to create a 360 WebVR experience by using 360 images as texture on to a sphere geometry. So, I have 2 spheres with 2 different 360 images as textures and I want a transition effect while transitioning from one sphere like the transition effect shown in the experience in the following link: [Google Street View 360° Virtual Tour Trusted Photographer • WalkThru360]. Please advise me on how to get this effect in threejs or if it is even possible.
You can’t do this from just crossfading spheres, from most of i seen street view and business view actually have a rough depth/geometry of every shot, which is also why you can move that jump cursor in every scene and it sort of projects to the surface of the scene like walls.
However the transitions seem do be different in some tours, like if these don’t have depth information and just warp the scene as if it was just a infinite flat ground. Which looks more like using 2 cameras crossfading also changing the field of view for a motion effect, at least you can see the stretching happening towards the goal, the same happening for the goal scene in reverse.
Btw. usually boxes are preferred over spheres for panoramas suffering less from distortions, which shouldn’t be exactly relevant for the effect, if you do it with shader you will have to use sphere-projected coordinates anyway not just stretching some uv around.
If what you want to archive is too complicated and you just need a working solution you can also offer a job.