Cesium JS에서 glTF 포맷 활용하기

2020. 2. 4. 14:23

이번 시간에는 3D Builder를 통한 GLTF포맷 데이터 생성 및 이를 Cesium JS에 활용하는 방법을 공유하겠습니다.
먼저 최종 결과를 확인 하겠습니다. (검색에서 여의도를 입력 하세요)

> 서비스바로가기

glTF 포맷이란?

JSON 표준을 사용하는 3D장면 및 모델의 파일 형식이며 3D장면의 크기를 축소하고 런타임 처리를 최소화하는

효율적이고 상호 운용 가능한 자산 전달 형식입니다.

> 바로가기 : glTF Overview (https://www.khronos.org/gltf/)

3D Builder 사용하기

1. Window '검색'을 통해 3D Builder를 검색하세요.

Tip. Window에 3D Builder가 기본 제공 되어있지 않은 경우 "MicroSoft Stroe"를 통해 다운로드 받으시길 바랍니다.

2. 3D Builder를 실행한 후 새 장면을 클릭합니다.

Tip. 각 기능에 대한 설명은 "3D Builder 사용자 가이드"를 참고하세요.

3. 3D 모델 생성 및 텍스쳐 입히기

우선, 정육면체 1개를 추가해봅시다.

그리고 그리기 메뉴에서 텍스쳐 탭을 클릭 후 임의의 텍스쳐를 입혀봅니다.

저장을 합니다.

Tip. 저장시에는 파일형식을 "glTF format"형식으로 해야합니다.

사진과 같이 gltf, bin 형식의 파일 그리고 설정한 텍스쳐 파일이 저장되었습니다.

필자는 아래 사진과 같은 3D Model을 생성하였습니다.

소스코드 작성하기

glTF 포맷을 사용하기 위한 소스코드

// Gltf포맷 사용을 위한 변수들 선언
var scene = viewer.scene;
var position = Cesium.Cartesian3.fromDegrees(126.934511, 37.521004, 0);
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
 
// fromGltf 함수를 사용하여 key : value 값으로 요소를 지정
scene.primitives.add(Cesium.Model.fromGltf({
    url : 'js/image/cesium.gltf', // gltf포맷의 위치 
    modelMatrix : modelMatrix,
    scale : 5000.0
}));

전체 소스코드는 다음과 같습니다.

<!DOCTYPE html>
<html lang='en'>
<meta charset="UTF-8">
<head>
  <script src="js/Cesium-1.54/Build/Cesium/Cesium.js"></script>
  <link href="js/Cesium-1.54/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
  <title>Make Building</title>
  <div id="cesiumContainer" style="width:auto; height:925px;"></div>
  <script>
    var extent = Cesium.Rectangle.fromDegrees(117.896284, 31.499028, 139.597380, 43.311528);

    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;

    var viewer = new Cesium.Viewer('cesiumContainer', {
         timeline : false,
         animation : false,
         selectionIndicator : false,
         navigationHelpButton : false,
         infoBox : false,
         navigationInstructionsInitiallyVisible : false   
    });

    // Gltf포맷 사용을 위한 변수들 선언
    var scene = viewer.scene;
    var position = Cesium.Cartesian3.fromDegrees(126.934511, 37.521004, 0);
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);
    // fromGltf 함수를 사용하여 key : value 값으로 요소를 지정
    scene.primitives.add(Cesium.Model.fromGltf({
        url : 'js/image/cesium.gltf', // Gltf포맷의 위치
        modelMatrix : modelMatrix,
        scale : 5000.0
    }));
  </script>
</head>
<body>

</body>
</html>

출처: https://progworks.tistory.com/64 [프로그웍스]

저작자표시 비영리

'프론트엔드 개발 놀이터 > etc' 카테고리의 다른 글

지구과학 - 적경, 적위, 방위각, 고도 (0)	2020.02.11
계절별 태양의 정오고도각 (0)	2020.02.11
Typescript 란? (0)	2020.02.04
web screen saver - stars (0)	2020.02.03
크롬 40+ 버전에서 의 앱 실행 문제 - 탐색할수없음 , 탐색이 차단됨 (0)	2020.01.15

내나라(nenara.com)