Sky dome with annotations
이 예제는 Sky dome를 사용하여 하늘을 표현하고, 주석을 추가하는 방법을 보여줍니다.
지도 애플리케이션에서 거리뷰와 같은 기능을 구현할 때, Sky dome를 사용하여 주위 공간을 표현하고 둘러 볼 수 있는 효과를 제공합니다.
먼저 다음과 같은 구체를 사용하여 geometry를 구성합니다.
그리고 구체의 표면에 표시할 다음과 같은 texture 이미지가 필요합니다.
보시다 싶이 texture 이미지는 일반적인 2d 이미와는 다르게 구체의 표면에 맞게 왜곡되어 있습니다.
이 이미지를 사용하여 구체에 side={THREE.BackSide} 속성을 사용하여 구체의 내부 표면에 texture를 적용합니다.
위 화면은 구체의 뒷 부분이 view frustum 밖에 걸쳐 있고 카메라 projection 상에서 뒷면에 해당하는 부분만 보이는 상태입니다.
마우스 휠 등으로 줌인을 하여 구체 안으로 들어가면 구체의 내부 표면에 적용된 texture가 보입니다.
카메라 위치를 구체 안으로 하고, <Html /> 컴포넌트를 사용하여 공간상에 주석을 추가할 수 있습니다.
일반적인 HTML 이벤트를 받아 내/외부 texture 이미지를 변경하여 interactive한 효과를 줄 수 있습니다.