Cesium JS 활용하기

지난 주까지 Cesium JS의 개발 환경을 구축하기까지 완료했다.

https://teachthegrace28.tistory.com/2

Cesium JS 개발 환경 구축

이번 주는 그럼 어떻게 활용할 것인가에 관해 잠시 소개를 해보겠다.

반복적으로 말했듯, 본인은 JavaScript에 관한 지식이 전무하고 웹 페이지를 처음 다뤄보는 것이기 때문에 '너무 야매로 알려주는데?' 라든지 '이걸 이렇게 한다고?' 라는 의문을 품을 수 있다.

그럴 때는 가감 없이 댓글로 알려주기를 바란다. (간절하게 정답을 알고 싶은 사람)

---

지구 위에 무언가를 띄워보기

지구 위에 무언가를 띄워보려면 코드를 제작해야한다.

코드를 어디에 입력할 것인가?

그 부분을 찾는 것이 포인트이다.

 

지난 번까지 했던 build 를 하고 나면 웹 페이지에 다양한 버튼이 뜬다.

그 중에서도 editing을 하기 위해서는 coding을 했다면 한 번쯤은 본 helloworld로 접속해준다.

덩그러니 지구만 떠있는 화면이 나왔다면 성공한 것이다.

이 helloworld 라는 지구만 떠있는 빈 페이지를 editing 할 것이므로 helloworld 를 작성한 파일이 어느 위치에 저장돼있는지 확인이 필요하다.

 

매우 쉽다.

이전까지 build 해놓은 폴더를 하나하나 뒤져보면 된다.

하지만 직접 찾는 것이 번거롭기 때문에 Git Bash 에 "code ." 을 입력하면 default 된 IDLE 로 해당 코드가 작성된 파일을 열어줄 것이다.

name@LAPTOP-M ~/Desktop/cesium-project/cesium (main)
$ code .

 

 

그럼 "C:\Users\name\Desktop\cesium-project\cesium\Apps\HelloWorld.html" 에서 작성한 코드를 "HelloWorld" 라는 웹페이지에서 보여주고 있다는 것을 알 수 있다.

우린 이 HelloWorld.html 을 지지고 볶아서 웹 페이지에 무언가를 띄울 것이다.

Cesium JS와 JavaSript 를 아무것도 모르는 내가 선택한 방법은 Cesium JS Tutorial 따라하기이다.

 

https://cesium.com/learn/cesiumjs-learn/cesiumjs-flight-tracker/

Build a Flight Tracker

해당 링크는 비행기가 이동하는 경로와 포인트를 보여주는 코드가 작성되어 있다.

이를 활용하여 비행기를 우주(지구 밖)에서 띄워보자.

 

비행기 모형을 가져오기 위해서는 직접 만든 모델을 코드에 불러와서 넣어주는 방법이 있을 수 있겠지만, 나는 그 정도까지 원하지 않기 때문에 token 으로 모델을 쉽게 불러올 수 있는 Cesium Ion을 사용하였다.

https://ion.cesium.com/

Cesium ion

해당 페이지에서 가입을 해주고 

Access Tokens -> 복사 버튼을 클릭

복사한 token을 붙여넣어준다.

Tutorial을 따라하면서 코드를 작성해주면 비행기를 추적하는 웹 페이지 제작이 끝난 것이다.

 

추가적으로 Cesium Ion에서 비행기 모형을 넣을 수 있는 방법은

먼저 원하는 그림을 다운 받는다.

Cesium Ion에 접속하여 My Assets -> Add data 클릭해준다.

그 후에 Add files -> 원하는 파일 선택 -> 이름 변경/data 종류 선택 -> Upload 해준다.

이때, data kind를 glTF 로 해주어야 움직이는 3D 모델을 볼 수 있다.

다시 Assert 페이지로 돌아와서 원하는 모델의 ID를 복사해준다.

해당 아이디를 코드에 붙여넣어주면 끝이다.

Git Bash에서 실행해주자.

name@LAPTOP-M4 ~/Desktop/cesium-project/cesium (main)
$ npm start

> cesium@1.100.0 start
> node server.js

[1/3] Building @cesium/engine...
[2/3] Building @cesium/widgets...
[3/3] Building CesiumJS...
Cesium built in 158.1 seconds.
Cesium development server running locally.  Connect to http://localhost:8080/

자 이제 해당 링크에 접속해보자.

성공적으로 화면이 보인다.

하지만 직접한 것이라고는 token을 복사해서 붙인 것이 전부이다.

이제 어떻게 화면에 나오게 되고 어떤 파일을 수정하면 될지를 알게 되었으니, 해당 파일의 코드만 원하는 대로 고쳐주면 된다.

즉 이 비행기를 우주에서 보고 싶다면, 

경도, 위도, 고도를 나타내는 flightData를 수정해주면 된다.

나의 경우에는 경도, 위도, 고도가 아닌 Cartesian 좌표계를 활용하여 x, y, z를 입력해주었다.

Cartesian의 x, y, z를 입력했기 때문에 position의 코드도 fromElements로 수정해주었다.

그리고 Cesium 의 default 단위는 meter 이기 때문에, km로 된 flightData를 meter로 표현해주기 위해 1000을 곱해주었다.

다시 실행하면 위와 비슷한 화면이 생성될 것이다.

(자세를 만지는 중이었기 때문에 비행기의 자세는 무시하길 바란다.)

하지만 아래의 viewer로 비행기를 트래킹하기 때문에 지구가 보일 정도로 줌아웃을 하게 되면 비행기는 보이지 않을 것이다.

viewer.trackedEntity

지구가 보일 정도로 줌아웃을 해도 비행기가 보이도록 하기 위해서는

model: { uri: airplaneUri,
        minimumPixelSize: 200.0 }

entity에 minimumPixelSize를 추가해주면 된다.

여기까지 했다면 Cesium 의 Documents 를 활용해서 다양한 구현을 할 수 있을 것이다.

본인은 자세를 다뤄보는 것이 목표이기 때문에 다음에는 좌표계에 대해서 공부를 해보려고 한다.