Build Streetview walk animation using ThreeJS

[kgoedecke]

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.

[Miles_Low]

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

[Mugen87]

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:

Trying to do simple motion blur but only get a black screen

Hi, I’ve made a fiddle of the issue: https://codepen.io/blaze33/pen/eKgzav If it worked you should see a rotating cube but it only display a black screen. I’m using GitHub - vanruesc/postprocessing: A post processing library that provides the means to implement image filter effects for three.js. on top of three.js. I posted on stackoverflow but may have more luck here Any help greatly appreciated plus if you have some tips on postprocessing with three.js I would really help me …