이번 시간에는 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
}));
|
cs |
전체 소스코드는 다음과 같습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
<!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>
|
cs |
결과 화면은 다음과 같습니다.
필자는 여의도 지역의 일부를 생성하였습니다.
'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글
| Cesium JS에서 gltf 포맷 활용 및 HeadingPitchRange 설정 (0) | 2019.02.26 |
|---|---|
| Cesium JS 3D 객체에 마우스 이벤트 연동 (3) | 2019.02.19 |
| Cesium JS에서 비행 Animation 활용하기 (0) | 2019.02.08 |
| Cesium JS에서 시점변경 기능 활용하기 (0) | 2019.01.29 |
| Cesium JS에서 3D 모델 생성하기 (0) | 2019.01.29 |