Cesium JS에서 3D 모델 생성하기

오늘은 Cesium JS를 활용하여 3D 모델을 생성해 보도록 하겠습니다.

> 서비스바로가기


1. 3D 모델을 생성 할 버튼 및 onclick 이벤트 생성


<!DOCTYPE html>
<html lang="en">
<meta charset = "UTF-8">
<head>
    <script src="js/Cesium-1.53/Build/Cesium/Cesium.js"></script>
    <script src="js/jquery/jquery-3.3.1.min.js"></script>
    <link href="js/Cesium-1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
 
<div>
    <h2>3차원 모델 만들기</h2>
    <input type="button" id="boxbutton" value="3D 상자" onclick="makeBox();">
    <input type="button" id="cylinderbutton" value="3D 원기둥" onclick="makeCylinder();">
</div>
 
</body>
</html>
cs


실행 화면은 다음과 같습니다. 


2. body태그 안 script 태그 안에 makeBox 함수 생성


<script type="text/javascript">
    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.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false       
        });
    
    // 3D 상자 생성하기
    function makeBox(){
         var box = viewer.entities.add({
                name : 'Box',
                position : Cesium.Cartesian3.fromDegrees(126.924403, 37.524624, 255.0), //상자가 생성될 위,경도 및 지면과의 이격(클수록 이격이 큼)
                box : {
                    dimensions : new Cesium.Cartesian3(500.0, 500.0, 500.0), // 상자의 크기 설정
                    material : Cesium.Color.WHITE, // 상자의 색 설정
                    outline : false, // 외곽선 설정
                    outlinecolor : Cesium.Color.BLACK // 외곽선 색 설정
                }
         }); 
         // 상자 생성 시 확대 함   
         viewer.zoomTo(viewer.entities);
         alert('3D 상자를 생성합니다.');
    }
</script>
</body>
</html>
cs


3D 상자 버튼을 눌렀을 시의 화면 입니다.


3. body태그 안 script 태그 안에 makeCylinder 함수 생성


<script type="text/javascript">
    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.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false       
        });
    
     //3D 원기둥 생성하기
    function makeCylinder(){
        var cylinder = viewer.entities.add({
            name : 'Cylinder',
            position : Cesium.Cartesian3.fromDegrees(126.907195, 37.526650, 255.0),
            cylinder : {
                length : 490, // 원기둥의 길이 설정
                topRadius : 200, 
                bottomRadius : 200, //원기둥의 위,아래 넓이를 설정
                material : Cesium.Color.WHITE,
                outline : false,
                outlinecolor : Cesium.Color.BLACK
            }
        });
        viewer.zoomTo(viewer.entities);
        alert('3D 원기둥을 생성합니다.');
    }
</script>
</body>
</html>
cs


3D 원기둥 버튼을 눌렀을 시의 화면입니다.


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

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE html>
<html lang="en">
<meta charset = "UTF-8">
<head>
    <script src="js/Cesium-1.53/Build/Cesium/Cesium.js"></script>
    <script src="js/jquery/jquery-3.3.1.min.js"></script>
    <link href="js/Cesium-1.53/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
</head>
<body>
<div id="cesiumContainer" style="width:auto; height:600px;"></div>
<div>
    <h2>3차원 모델 만들기</h2>
    <input type="button" id="boxbutton" value="3D 상자" onclick="makeBox();">
    <input type="button" id="cylinderbutton" value="3D 원기둥" onclick="makeCylinder();">
</div>
<script type="text/javascript">
    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.7;
 
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJkOGMxZjMzNy01N2FkLTQ3YTctODU0NS05NGY0MmE3MGJiOWEiLCJpZCI6NjExNywic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0NTI3OTE3NH0.6VdcqK6vL7faWx_vYkkOuNNa8dapTn1geCi7qYBhGCw';
    var viewer = new Cesium.Viewer('cesiumContainer',
        {
            timeline : false,
            animation : false,
            selectionIndicator : false,
            navigationHelpButton : false,
            infoBox : false,
            navigationInstructionsInitiallyVisible : false       
        });
    
    // 3D 상자 생성하기
    function makeBox(){
         var box = viewer.entities.add({
                name : 'Box',
                position : Cesium.Cartesian3.fromDegrees(126.924403, 37.524624, 255.0),
                box : {
                    dimensions : new Cesium.Cartesian3(500.0, 500.0, 500.0),
                    material : Cesium.Color.WHITE,
                    outline : false,
                    outlinecolor : Cesium.Color.BLACK
                }
         });     
         viewer.zoomTo(viewer.entities);
         alert('3D 상자를 생성합니다.');
    }
    
    //3D 원기둥 생성하기
    function makeCylinder(){
        var cylinder = viewer.entities.add({
            name : 'Cylinder',
            position : Cesium.Cartesian3.fromDegrees(126.907195, 37.526650, 255.0),
            cylinder : {
                length : 490,
                topRadius : 200,
                bottomRadius : 200,
                material : Cesium.Color.WHITE,
                outline : false,
                outlinecolor : Cesium.Color.BLACK
            }
        });
        viewer.zoomTo(viewer.entities);
        alert('3D 원기둥을 생성합니다.');
    }
    
</script>
</body>
</html>
 
cs


완성된 실행화면입니다.

> 서비스바로가기

'꿀팁 - CesiumJS, nullschool' 카테고리의 다른 글

Cesium JS에서 glTF 포맷 활용하기  (1) 2019.02.12
Cesium JS에서 비행 Animation 활용하기  (0) 2019.02.08
Cesium JS에서 시점변경 기능 활용하기  (0) 2019.01.29
Cesium JS에서 OGC Web Service 이용하기  (0) 2019.01.15
CesiumJS 시작하기  (0) 2019.01.15

+ Recent posts

티스토리툴바