Build Streetview walk animation using ThreeJS

Hi ThreeJS lovers,

we have a ThreeJS web app that displays multiple 360 images and allows users to switch between images through hotspots,like they are know from various 360 virtual tour providers or Google Streetview. We want to create an animation transition between the images like Google does it on Google Streetview. The current image is zoomed in and the next images is faded in with what I would describe as a morph / fly effect.

My question now is how can we create a similar transition effect using ThreeJS. I did some experiments with moving the camera within a sphere that has the 360 images mapped on it and then positioning an other sphere behind it, but the transition doesn’t look as good.

I would really appreciate if you guys have some ideas on how to realize this.

Hi, could I see this three.js web app?

You can try to achieve the desired effect via post-processing. I guess it’s some kind of motion blur combined with a transition effect between both views. Please have a look at the following topic to see a very basic motion blur demo in action: