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?

Answer 1

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.