mago3D.JS V1.0.0

3차원 다중 블록 가시화를 위한 오픈소스 자바스크립트 라이브러리

AEC(Architecture, Engineering, Construction) 영역과 전통적인 3차원 공간정보(3D GIS)를 통합적으로 관리 및 가시화하는 차세대 3차원 GIS 플랫폼입니다. 실내,실 외 구별없이 AEC와 3D GIS를 웹 브라우저에서 통합해 줍니다. 대용량 BIM(Building Information Modelling), JT(Jupiter Tessellation), 3D GIS 파일 등을 별도의 프로그램 설치 없이 웹 브라우저 상에서 바로 살펴보고 협업작업을 진행할 수 있습니다.

Development Environment

java8, eclipse neon, node, apache, Jasmine, Jsdoc, Gulp, eslint, JQuery

Getting Started

  • mago3DJS Install
    • github에서 mago3DJS를 받아 줍니다.
    • 설치경로 C:/git/repository/mago3djs
  • node Setup
    • npm install
    • npm install -g gulp
  • 서버 실행
    • Local 서버 실행: C:\git\repository\mago3djs> node server.js
    • public 서버 실행: C:\git\repository\mago3djs> node server.js --public true
  • 데이터 폴더 링크
    • 데이터 폴더 생성: mklink /d "C:\git\repository\mago3djs\data" "C:\data"
    • 데이터 폴더 삭제: C:\git\repository\mago3djs>rmdir data

changeMagoStateAPI

mago3D 활성화 상태 값을 변경함으로서 화면에 mago3D Object가 표시, 비표시 됩니다.

Parameters:

Name Description
isShow true: 활성화, false: 비활성화

Examples:

html
<div>mago3D
	<input type="radio" id="magoEnable" name="magoState" value="0" checked="checked" onclick="changeMagoState(true);" />
	<label for="magoEnable"> 활성화 </label>
	<input type="radio" id="magoDisable" name="magoState" value="1"  onclick="changeMagoState(false);" />
	<label for="magoDisable"> 비활성화 </label>
</div>

			

JavaScript
function changeMagoState(isShow) {
	changeMagoStateAPI(isShow);
}

			

changeBoundingBoxAPI

changeBoundingBoxAPI 활성화 상태 값을 변경함으로서 BoundingBox가 표시, 비표시 됩니다.

Parameters:

Name Description
isShow true: 활성화, false: 비활성화

Examples:

html
<div>
	<span>BoundingBox</span>
	<input type="radio" id="showBoundingBox" name="boundingBox" value="true" onclick="changeBoundingBox(true);" />
	<label for="showBoundingBox"> 표시 </label>
	<input type="radio" id="hideBoundingBox" name="boundingBox" value="false"  onclick="changeBoundingBox(false);" />
	<label for="hideBoundingBox"> 비표시 </label>
</div>

			

JavaScript
function changeBoundingBox(isShow) {
	$("input:radio[name='boundingBox']:radio[value='" + isShow + "']").prop("checked", true);
	changeBoundingBoxAPI(isShow);
}

			

changeShadowAPI

changeShadowAPI 활성화 상태 값을 변경함으로서 블락의 Structure, Outfitting 그림자가 표시, 비표시 됩니다

Parameters:

Name Description
isShow true: 활성화, false: 비활성화

Examples:

html
<div>Shadow
	<input type="radio" id="showShadow" name="shadow" value="true" onclick="changeShadow(true);" />
	<label for="showShadow"> 표시 </label>
	<input type="radio" id="hideShadow" name="shadow" value="false"  onclick="changeShadow(false);" />
	<label for="hideShadow"> 비표시 </label>
</div>

			

JavaScript
function changeShadow(isShow) {
	changeShadowAPI(isShow);
}

				

changeFrustumFarDistanceAPI

입력 받은 거리의 제곱값을 이용해서 Frustum Culling 거리를 설정합니다.

Parameters:

Name Description
frustumFarDistance frustum 거리. 내부적으로는 입력값의 제곱이 사용됨

Examples:

html
<label for="frustumFarDistance"> 가시 거리 </label>
<input type="text" id="frustumFarDistance" name="frustumFarDistance" placeholder="미터(m)"/>
<button type="button" id="changeFrustumFarDistanceAPI" class="btn btn-default btn-sm">적용</button>

			

JavaScript
$("#changeFrustumFarDistanceAPI").click(function() {
	if(!changeFrustumFarDistanceCheck()) return false;
	changeFrustumFarDistanceAPI($("#frustumFarDistance").val());
});

				

searchDataAPI

데이터 고유키를 입력받아, 카메라 위치를 이동합니다.

Parameters:

Name Description
dataKey 검색을 원하는 blockId

Examples:

html
<div>
	<span>Data Key</span>
	<input type="text" id="search_data_key" name="search_data_key"/>
	<button type="button" id="searchData">검색</button>
</div>

			

JavaScript
$("#searchData").click(function() {
	if ($.trim($("#search_data_key").val()) === ""){
		alert("Data Key를 입력해 주세요.");
		$("#search_data_key").focus();
		return false;
	}
	searchDataAPI($("#search_data_key").val());
});

				

changeColorAPI

입력받은 Object 를 입력받은 color 로 변경 표시합니다.
Object정보를 ','로 구분해서 복수 입력 가능합니다.

Parameters:

Name Description
objectIds object id. 복수개의 경우 , 로 입력
color R, G, B 색깔을 ',' 로 연결한 string 값을 받음

Examples:

html
<div>
	<label for="objectIds">Object Id 입력 </label>
	<input type="text" id="objectIds" name="objectIds" placeholder=", 구분 입력"/>
	<label for="colorBlock">색깔</label/>
	<select id="colorBlock" name="colorBlock"/>
		<option value=""> 없음 </option/>
		<option value="255,0,0"> 빨강 </option/>
		<option value="255,255,0"> 노랑</option/>
		<option value="0,255,0"> 녹색 </option/>
		<option value="0,0,255"> 파랑 </option/>
		<option value="255,0,255"> 분홍 </option/>
		<option value="0,0,0"> 검정 </option/>
	</select>
	<button type="button" id="changeColorAPI" class="btn btn-default btn-sm">변경</button>
<div/>

			

JavaScript
$("#changeColorAPI").click(function(e) {
	if(!changeColorCheck(e)) return false;
	changeColorAPI($("#objectIds").val(), $("#colorBlock").val());
});

				

changeLocationAndRotationAPI

입력 받은 위치정보와 회전 정보로 블록을 변환 시킵니다.

Parameters:

Name Description
data_key object id
latitude 위도
longitude 경도
height 높이
heading 좌, 우
pitch 위, 아래
roll 좌, 우 기울기

Examples:

html
<div>Location And Rotation
	<div>
		<span>
			<label for="move_data_key">Data Key </label>
			<input type="text" id="move_data_key" name="move_data_key"/>
		</span>
	</div>
	<div>
		<span>
			<label for="move_latitude">위도</label>
			<input type="text" id="move_latitude" name="move_latitude"/>
		</span>
	</div>
	<div>
		<span>
			<label for="move_longitude">경도</label>
			<input type="text" id="move_longitude" name="move_longitude"/>
		</span>
	</div>	
	.
	.
	.
	<div>
		<span>
			<label for="move_roll">ROLL</label>
			<input type="text" id="move_roll" name="move_roll"/>
			<button type="button" id="changeLocationAndRotationAPI">변환</button>
		</span>
	</div>		
</div>

			

JavaScript
$("#changeLocationAndRotationAPI").click(function() {
	if(!changeLocationAndRotationCheck()) return false;
	changeLocationAndRotationAPI(	$("#move_data_key").val(), $("#move_latitude").val(), $("#move_longitude").val(), 
					$("#move_height").val(), $("#move_heading").val(), $("#move_pitch").val(), $("#move_roll").val());
});

				

changeMouseMoveAPI

마우스를 클릭할 때 이동 모드를 변경할 수 있습니다. mouseMoveMode가 0이면 전체이동, 1이면 객체이동, 2이면 이동이 불가능해집니다.

Parameters:

Name Description
mouseMoveMode mouseMoveMode 0 = All, 1 = object, 2 = None

Examples:

html
<div>
	<span>Selecting And Moving</span>
	<input type="radio" id="mouseNoneMove" name="mouseMoveMode" value="2" onclick="changeMouseMove('2');"/>
	<label for="mouseNoneMove"> None </label>
	<div>
		<input type="radio" id="mouseAllMove" name="mouseBlockMove" value="0" onclick="changeMouseMove('0')"/>
		<label for="mouseAllMove">All</label>
	</div>
	<div>
		<input type="radio" id="mouseObjectMove" name="mouseBlockMove" value="1" onclick="changeMouseMove('1')"/>
		<label for="mouseObjectMove">Object</label>
	</div>		
</div>	

			

JavaScript
function changeMouseMove(mouseMoveMode) {
	$("input:radio[name='mouseMoveMode']:radio[value='" + mouseMoveMode + "']").prop("checked", true);
	changeMouseMoveAPI(mouseMoveMode);
}

				

changeInsertIssueModeAPI

changeInsertIssueModeAPI란 이슈 기능을 활성화하는 API입니다. 이 API에 파라미터인 flag는 Boolean 타입이고 true이면 이슈 모드가 활성화되고 false이면 비활성화되는 방식입니다. 활성화되어있는 상태에서 이슈를 등록하고 싶은 Object를 클릭하면 callback함수를 관리해주는 데이터베이스 운영정책에 따라서 이슈등록 callback함수가 호출이되어 이슈등록 창이 나옵니다. 이슈등록 창에 내용을 적고 저장하면 데이터베이스에 등록이됩니다. 또한, 이슈등록 callback함수는 사용자가 Customizing이 가능합니다.

Parameters:

Name Description
flag true = 활성화, false = 비활성화

Examples:

html
<button id="issueEnable">Issue 등록</button>

				

JavaScript
var insertIssueFlag = false;
$("#issueEnable").click(function() {
	if(insertIssueFlag) {
		insertIssueFlag = false;
		$("#issueEnable").removeClass("on");
	} else {
		insertIssueFlag = true;
		$("#issueEnable").addClass("on");
	}
	changeInsertIssueModeAPI(insertIssueFlag);
});

			

mago3DJS로 부터 호출 되는 callback 함수
function showInsertIssueLayer(data_name, data_key, latitude, longitude, height) {
	if(insertIssueFlag) {
		if($("#inputIssueLayer").css("display") == "none") {
			$("#inputIssueLayer").show();
			
			$("#data_key").val(data_name);
			$("#latitude").val(latitude);
			$("#longitude").val(longitude);
			$("#height").val(height);
			
			// 현재 좌표를 저장
			$("#now_latitude").val(latitude);
			$("#now_longitude").val(longitude);
		}
	}
}

			

changeObjectInfoViewModeAPI

changeObjectInfoViewModeAPI는 Object정보표시 기능을 활성화하는 API입니다. 이 API에 파라미터인 flag는 Boolean 타입이고 true이면 정보 표시 모드가 활성화되고 false이면 비활성화되는 방식입니다. 활성화되어있는 상태에서 정보를 알고 싶은 Object를 클릭하면 callback함수를 관리해주는 데이터베이스 운영정책에 따라서 정보표시 callback함수가 호출되고 Jquery Plugin Toast통하여 Object정보가 나옵니다. 또한, 정보표시 callback함수는 사용자가 Customizing이 가능합니다.

Parameters:

Name Description
isShow true = 활성화, false = 비활성화

Examples:


html
<div>
	<button id="objectInfoEnable">Object 정보</button>	
</div>
			
				

JavaScript
function changeObjectInfoViewMode(isShow) {
	$("input:radio[name='objectInfo']:radio[value='" + isShow + "']").prop("checked", true);
	changeObjectInfoViewModeAPI(isShow);
}

				

mago3DJS로 부터 호출 되는 callback 함수
function showSelectedObject(data_key, objectId, latitude, longitude, height, heading, pitch, roll) {
	var objectInfoViewFlag = $(':radio[name="objectInfo"]:checked').val();
	if(objectInfoViewFlag) {
		$("#move_data_key").val(data_key);
		$("#move_latitude").val(latitude);
		$("#move_longitude").val(longitude);
		$("#move_height").val(height);
		$("#move_heading").val(heading);
		$("#move_pitch").val(pitch);
		$("#move_roll").val(roll);
		
		$.toast({
		    heading: 'Click Object Info',
		    text: [
		    	'dataKey : ' + data_key, 
		        'objectId : ' + objectId,
		        'latitude : ' + latitude,
		        'longitude : ' + longitude,
		        'height : ' + height,
		        'heading : ' + heading,
		        'pitch : ' + pitch,
		        'roll : ' + roll
		    ],
			bgColor : '#393946',
			hideAfter: 5000,
			icon: 'info',
			position : 'bottom-right'
		});
		
		// occlusion culling
		$("#occlusion_culling_data_key").val(data_key);
		// 현재 좌표를 저장
		$("#now_latitude").val(latitude);
		$("#now_longitude").val(longitude);
	}
}

				

changeListIssueViewModeAPI

now_latitude, now_longitude를 가지고 데이터 그룹에 있는 그룹 중에 가장 가까운 그룹 위치를 찾고 그 데이터 그룹에 속하는 issue 100개를 가져와서 보여줍니다.

Parameters:

Name Description
flag true = 활성화, false = 비활성화

Examples:

html
<button id="issuesEnable">Issues 표시</button>
<input type="hidden" id="now_latitude" name="now_latitude" value="${now_latitude}" />
<input type="hidden" id="now_longitude" name="now_longitude" value="${now_longitude}"  />

			

JavaScript
$("#issuesEnable").click(function() {
	if(listIssueFlag) {
		listIssueFlag = false;
		$("#issuesEnable").removeClass("on");
	} else {
		listIssueFlag = true;
		$("#issuesEnable").addClass("on");
		
		// 현재 위치의 latitude, logitude를 가지고 가장 가까이에 있는 데이터 그룹에 속하는 이슈 목록을 최대 100건 받아서 표시
		var now_latitude = $("#now_latitude").val();
		var now_longitude = $("#now_longitude").val();
		var info = "latitude=" + now_latitude + "&longitude=" + now_longitude;		
		$.ajax({
			url: "/issue/ajax-list-issue-by-geo.do",
			type: "GET",
			data: info,
			dataType: "json",
			success: function(msg){
				if(msg.result == "success") {
					var issueList = msg.issueList;
					if(issueList != null && issueList.length > 0) {
						for(i=0; i<issueList.length; i++ ) {
							var issue = issueList[i];
							drawInsertIssueImageAPI(0, issue.issue_id, issue.issue_type, issue.data_key, issue.latitude, issue.longitude, issue.height);
						}
					}
				} else {
					alert(JS_MESSAGE[msg.result]);
				}
			},
			error:function(request,status,error){
		        //alert(JS_MESSAGE["ajax.error.message"]);
				console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
			}
		});
	}
	changeListIssueViewModeAPI(listIssueFlag);
});

				

drawInsertIssueImageAPI

Pin Image를 그려줍니다. drawType이 0 이면 DB, 1 이면 이슈등록

Parameters:

Name Description
drawType 이미지를 그리는 유형 0 : DB, 1 : 이슈등록
issue_id 이슈 고유키
issue_type 이슈 고유키
data_key 데이터 고유키
latitude 데이터 고유키
longitude 데이터 고유키
height 데이터 고유키

Examples:


JavaScript
drawInsertIssueImageAPI(0, issue.issue_id, issue.issue_type, issue.data_key, issue.latitude, issue.longitude, issue.height);

				

changeInsertIssueStateAPI

mago3DJS 엔진이 이슈 등록을 위해서 좌표를 기억하고 있었는데 changeInsertIssueStateAPI에 파라미터에 0을 넘겨 주면 좌표를 초기화합니다.

Parameters:

Name Description
insertIssueState 이슈 등록 좌표 상태

Examples:

JavaScript
changeInsertIssueStateAPI(0);

				

changeLabelAPI

객체이름을 라벨형식으로 보여주는 API입니다.

Parameters:

Name Description
isShow true = 표시, false = 비표시

Examples:

html
<div>
	<h3>Label</h3>
	<input type="radio" id="showLabel" name="labelInfo" value="true" onclick="changeLabel(true);" />
	<label for="showLabel"> 표시 </label>
	<input type="radio" id="hideLabel" name="labelInfo" value="false" onclick="changeLabel(false);"/>
	<label for="hideLabel"> 비표시 </label>
</div>
				
				
JavaScript
function changeLabel(isShow) {
	$("input:radio[name='labelInfo']:radio[value='" + isShow + "']").prop("checked", true);
	changeLabelAPI(isShow);
}

				

changeFPVModeAPI

1인칭, 3인칭을 변경해주는 API입니다. (개발중)

Parameters:

Name Description
isShow true = 표시, false = 비표시

Examples:

html
<div>
	<h3>View Mode</h3>
	<input type="radio" id="mode3PV" name="viewMode" value ="false" onclick="changeViewMode(false);"/>
	<label for="mode3PV"> 3인칭 모드 </label>
	<input type="radio" id="mode1PV" name="viewMode" value ="true" onclick="changeViewMode(true);"/>
	<label for="mode1PV"> 1인칭 모드 </label>
</div>
				
				
JavaScript
function changeViewMode(isFPVMode) {
	$("input:radio[name='viewMode']:radio[value='" + isFPVMode + "']").prop("checked", true);
	changeFPVModeAPI(isFPVMode);
}

				

changeLightingAPI

밝기를변경해주는API

Parameters:

Name Description
ambientReflectionCoef ambientReflectionCoef
diffuseReflectionCoef diffuseReflectionCoef
specularReflectionCoef specularReflectionCoef
ambientColor ambientColor
specularColor specularColor

Examples:

html
<div>
	<h3>Lighting</h3>
	<div>AmbientReflectionCoeficient</div>
	<div id="ambient_reflection_coef">
		<div id="geo_ambient_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_ambient_reflection_coef" name="geo_ambient_reflection_coef"/>
	</div>
	<div>DiffuseReflectionCoeficient</div>
	<div id="diffuse_reflection_coef" style="display: inline-block; width: 245px;">
		<div id="geo_diffuse_reflection_coef_view" class="ui-slider-handle"></div>
		<input type="hidden" id="geo_diffuse_reflection_coef" name="geo_diffuse_reflection_coef"/>
	</div>
	<div>SpecularReflectionCoeficient</div>
	<div>
		<div id="specular_reflection_coef">
			<div id="geo_specular_reflection_coef_view" class="ui-slider-handle"></div>
			<input type="hidden" id="geo_specular_reflection_coef" name="geo_specular_reflection_coef" />
		</div>
		<button type="button" id="changeLightingButton" class="btn">변경</button>
	</div>
</div>
				
				
JavaScript
$("#changeLightingButton").click(function() {
	changeLightingAPI( $("#geo_ambient_reflection_coef").val(), $("#geo_diffuse_reflection_coef").val(),
			    $("#geo_specular_reflection_coef").val(), null, null);
});

				

changeSsadRadiusAPI

Parameters:

Name Description
ssaoRadius ssaoRadius

Examples:

html
<div>
	<h3><label for="geo_ssao_radius">SSAO Radius</label></h3>
	<input type="text" id="geo_ssao_radius" name="geo_ssao_radius" />
	<button type="button" id="changeSsadRadiusButton" class="btn">변경</button>
</div>
				
				
JavaScript
$("#changeSsadRadiusButton").click(function() {
	changeSsadRadiusAPI($("#geo_ssao_radius").val());
});

				

changeLodAPI

Parameters:

Name Description
lod0DistInMeters lod0DistInMeters
lod1DistInMeters lod1DistInMeters
lod2DistInMeters lod2DistInMeters
lod3DistInMeters lod3DistInMeters

Examples:

html
<div>
	<h3>LOD</h3>
	<div>
		<div>LOD0</div>
		<input type="text" id="geo_lod0" name="geo_lod0"/>
	</div>
	<div>
		<div>LOD1</div>
		<input type="text" id="geo_lod1" name="geo_lod1"/>
	</div>
	<div>
		<div>LOD2</div>
		<input type="text" id="geo_lod2" name="geo_lod2"/>
		<button type="button" id="changeLodButton" class="btn">변경</button>
	</div>
</div>
				
				
JavaScript
$("#changeLodButton").click(function() {
	changeLodAPI($("#geo_lod0").val(), $("#geo_lod1").val(), $("#geo_lod2").val(), null);
});