[Cesium] glTF 3D 모델 Cesium Map 에 올리기

운영체제     : Window 8.1 64bit  개발 툴      : Notepad++  Cesium 버전 : Cesium 1.11  작성날짜     : 2015-07-10

참고 : Cesium Sandcastle

참고에서 3D Models 샘플을 참고하면 밑에 코드를 확인할 수 있다.

createModel 함수를 정의하고 .bgltf 파일 경로를 넣어준 후 height 를 설정하면 된다.

지도의 좌표값은 position 변수에서 Cesium.Cartesian3.fromDegrees 함수에 매개변수를 지정해 주면된다.

Cesium.Cartesian3 에 더 자세한 건 밑에 링크를 참고하면 되겠다.

Cartesian3 - https://cesiumjs.org/refdoc.html

그리고 .bgltf 파일은 COLLADA 파일을 변환해서 만들 수 있다.

변환은 아래 링크를 참고.

COLLADA to glTF - https://cesiumjs.org/convertmodel.html

참고로 변환할 수 있는 용량은 50메가로 한정되어있다.(2015-07-10 현재)

아래는 자바스크립트 예제 코드이다.

html 파일은 아래글을 참고.

Cesium Hello world! - http://kanais2.tistory.com/173

var viewer = new Cesium.Viewer('cesiumContainer'); createModel('./cesium/3d_model.bgltf', 0.0); function createModel(url, height) {     viewer.entities.removeAll();     var position = Cesium.Cartesian3.fromDegrees(126.989861, 37.577759, height);     var heading = Cesium.Math.toRadians(135);     var pitch = 0;     var roll = 0;     var orientation = Cesium.Transforms.headingPitchRollQuaternion(position, heading, pitch, roll);     var entity = viewer.entities.add({         name : url,         position : position,         orientation : orientation,         model : {             uri : url,             minimumPixelSize : 128         }     });     viewer.trackedEntity = entity; }

결과 화면