Cesium JS에서 gltf 포맷 활용 및 HeadingPitchRange 설정

이번 시간에는 Cesium JS에서 gltf 포맷을 이용한 가상의 시나리오를 만들어 보겠습니다.

시나리오는 마포대교 위에 비행하는 드론이 실시간으로 교통상황을 알리는 내용입니다.

 

* HeadingPitchRange 설명 (CesiumDocument)

HeadingPitchRange는 시각 및 관점에 대한 값을 정의하는것입니다.

Heading은 방향을 나타냅니다. 360'와 0' 그리고 프레임 중심을 기준으로 양의 값일때에는 동쪽, 음의 값일때에는 서쪽으로 각이 변경됩니다.

 

Pitch는 각을 나타냅니다. 여기서의 각은 평면(x,y)을 기준으로 양의 값일때에는 올라가고 음의 값일때에는 내려가게됩니다.

 

 

Range는 거리를 나타냅니다. 프레임 중심으로부터의 거리를 조절할 수 있습니다. 

 

상기 내용은 필자가 기본값(0.0)을 토대로 heading, pitch, roll 각각 임의의 값을 넣어서 테스트 한 것임을 알려드립니다.  

 

결과부터 보시겠습니다.

> 서비스바로가기

 

* 이번 게시물에서 필자가 중요하다고 생각하는 소스코드입니다. 

/*************
    heading: Heading변경 슬라이드 값 - 0~360까지의 값 
    pitch: Pitch변경 슬라이드 값- 0~150까지의 값
    range: Range변경 슬라이드 값 - 0~60까지의 값
    **************/    
    var staticPosition = Cesium.Cartesian3.fromDegrees(126.933209, 37.515165,2200);
    var orientation = new Cesium.HeadingPitchRange(heading, pitch, range);
    viewer.scene.camera.setView({
        // staticPosition -- (126.933209, 37.515165, 2200) <- 마포대교를 바라보기 위한 위치(좌표) 
        destination : staticPosition,    
        // orientation -- heading, pitch, range 값 
        orientation : orientation                
    });

staticPosition이라는 변수에 마포대교를 바라보는 관점 즉, 위치를 지정합니다.

유저 컨트롤을 통해 획득한 값을 활용하여 관점을 변경할 수 있습니다.

 

* 결과화면을 보겠습니다. 마포대교 모델 상공에 드론 모델이 비행하는 모습을 볼 수 있습니다.

 

 

마포대교를 클릭 했을 시 차량 수와 교통 수준 정도가 조건을 토대로 랜덤하게 표출되는것을 볼 수 있습니다.

 

유저 컨트롤을 통해 heading, pitch, range 값을 조절할 수 있습니다. 슬라이드를 통해 각 값을 조절하고 변경 버튼을 통해 관점을 변경할 수 있습니다.

 

heading에 임의의 값을 주었더니 관점이 변경된 것을 볼 수 있습니다. 독자 여러분도 슬라이드와 버튼을 통해 관점을 변경하여 보세요.

Tip. 관점의 변경은 구체(원)를 생각하시면 이해하기 쉽습니다.