Three.js: Transition 2 Textures with Zoom and Blend Effects

Question

I am trying to smoothly transition from one panoramic cube image into another to achieve a walk-through effect inside the room. I used this sample as a starter with Scene, Camera, Mesh SkyBox all set up. Now I am thinking of best ways to transition into a new panoramic cube so one cube image zooms in and blends into another as if user walks in the room.

I have thought of having a second Scene and second Camera, because old image needs to zoom in and fade out while new image to zoom in and fade in to achieve very smooth transition. I had some challenges here with displaying 2 images at the same time. Old one - sceneA - is not visible when SceneB appears and covers it with:

renderer.clear();//multi-scene
if(sceneA && cameraA)
        renderer.render( sceneA, cameraA );
renderer.clearDepth();
renderer.render( sceneB, cameraB );

But even if fixed, I am giving it a second thought if this is a right approach. I would like to experiment with texture transitioning, perhaps. I cannot find examples or get an idea how to do it.

How to transition smoothly from one visible cube image (texture) into another using scenes or texture's different source?

Can I get clarification: Are you wanting a "zoom" type effect like a quick short blurry warp type thing? Or would a gradual cross-fade between the 2 cubes suffice? Or do you to clearly move through a sharp defined doorway into a new room and be able to stand in one room and look through into the other room? I can think of approaches for all but need to know which you want. — Martin Joiner
Thanks Martin. I like how this example does it: biganto-visual.ru/portfolio/53/749.html. I will have the same set of cubes which I need to smoothly transition around. In other words, scene1 zooms and fades into another scene. — Vad
Ah-ha I see! They have many cubemaps (3d photos) taken from all the points in the house that you could physically stand in at 1 metre intervals. The 3D capture process would have taken hours. It looks to me like they have sized the cubes to realistic proportions and placed them so their centres are where the 3D camera was sitting. The process of transitioning is a combination of the camera dollying to the centre of a new cube while simultaneously the old cube fades to zero opacity and the new cube fades to total opacity. I would use TWEEN library to all the graduations. — Martin Joiner
Yes, Martin, your answer was very helpful and gave me clearer direction. I started digging that example and discovered they use GLSL and mix 2 textures for transitioning. I am trying to understand advantages of that approach vs Tween lib you suggest. Feel free to share your thoughts. — Vad

Martin Joiner Martin Joiner · Accepted Answer · 2017-10-08T18:10:29

If you have many cubemaps (3d photo captures) taken at small intervals throughout a space then you could use the THREE.CubeTextureLoader to map them to the inside surfaces of cube shaped meshes that are sized to realistic proportions (similar to the rooms they were taken in) and place them throughout the space so that their centres are where the 3D camera was sitting at time of capture.

Then, the process of transitioning between positions would be a combination of dollying the camera to the centre of a new cube while simultaneously the old cube fades to zero opacity and the new cube fades to total opacity.

Only 1 cube would be fully visible at any time, the rest exist in the space but are invisible.

I would use the Three.js TWEEN library for all the graduations: the position of the camera and the transparency of the 2 cubes.

Note: I always render my scenes so 1 unit in 3d world is 1 metre in the real world. It helps get things looking realistic quicker and also if I want to share models or code techniques between projects they are more likely to be compatible.

Three.js: Transition 2 Textures with Zoom and Blend Effects

1 Answers