Three.js:具有缩放和混合效果的过渡2纹理 [英] Three.js: Transition 2 Textures with Zoom and Blend Effects

问题描述

我正在尝试从一个全景立方体图像平滑过渡到另一个全景立方体图像，以实现室内漫游效果.我使用

然后，在位置之间进行过渡的过程将是将摄影机移动到新立方体的中心，同时旧立方体逐渐变为零不透明度，新立方体逐渐变为总不透明度.

任何时候，只有1个多维数据集是完全可见的，其余的存在于该空间中但不可见.

我会使用三个.js TWEEN库，用于所有刻度:相机的位置和2个立方体的透明度.

注意:我总是渲染场景，因此3d世界中的1个单位在现实世界中是1米.它有助于使事情看起来更快地逼真，并且如果我想在项目之间共享模型或代码技术，则它们很可能是兼容的.

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?

解决方案

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:具有缩放和混合效果的过渡2纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！