Three.js : 확대/축소 효과 및 혼합 효과가있는 전환 2 텍스처

Question

하나의 파노라마 큐브 이미지에서 다른 파노라마 큐브 이미지로 자연스럽게 전환하여 회의실 내부에서 워크 스루 효과를 얻으려고합니다. this 샘플을 Scene, Camera, Mesh SkyBox의 모든 스타터로 사용했습니다. 이제는 새로운 파노라마 형 큐브로 전환하는 최선의 방법을 생각하고 있습니다. 그래서 한 큐브 이미지가 확대되어 사용자가 방 안으로 들어가 듯 서로 조화를 이룹니다.

두 번째 장면과 두 번째 카메라가 있다고 생각했습니다. 오래된 이미지는 확대해야하고 새로운 이미지는 확대하고 매우 부드러운 전환을 위해 페이드 아웃해야하기 때문입니다. 나는 2 개의 이미지를 동시에 표시하면서 몇 가지 도전을했습니다. 고정 된 경우에도 이것이 올바른 접근 방식 인 경우, 나는 그것을 두 번째 생각을 포기하고 그러나

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

: 이전 - - sceneA은 SceneB가 나타나고 그것을 포함하는 경우 표시되지 않습니다. 아마도 텍스쳐 변환을 실험하고 싶습니다. 나는 예제를 찾거나 그것을하는 법을 알 수 없다.

장면이나 텍스처의 다른 원본을 사용하여 하나의 보이는 큐브 이미지 (텍스처)에서 다른 큐브 이미지 (텍스처)로 부드럽게 전환하는 방법은 무엇입니까?

Answer 1

공간 전체에 작은 간격으로 많은 큐브 맵 (3D 사진 캡처)을 찍은 경우 THREE.CubeTextureLoader을 사용하여 사실적인 비율로 크기가 조정 된 큐브 모양의 메쉬의 내부 표면에 매핑 할 수 있습니다 찍은) 3D 카메라가 촬영 당시 앉아 있던 센터가되도록 공간 전체에 배치하십시오. 동시에 이전 큐브 제로 불투명도 페이드 새로운 큐브 전체 페이드 동안

그리고, 위치 사이 전환 프로세스는 새로운 입방체의 중심에 카메라를 이동 시키거나 결합 될 불투명.

나머지 큐브는 항상 보이지만 보이지 않습니다.

모든 눈금에는 Three.js TWEEN library을 사용합니다. 카메라의 위치와 2 개의 큐브의 투명도입니다.

참고 : 저는 현실 세계에서 1 단위가 1 미터가되도록 항상 내 장면을 렌더링합니다. 현실감있는 작업을보다 빠르게 수행 할 수있게 해주 며 프로젝트간에 모델 또는 코드 기술을 공유하려는 경우 호환성이 높습니다.