mago3DJS

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

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

특징

• AEC와 3D GIS의 통합
• 실내외 공간의 끊김없는 연계
• 웹브라우저 상에서 구동되며, 별도의 플러그인이나 엑티브엑스 설치가 필요 없음
• 오픈소스(Cesium, Web World Wind)를 기반으로 개발되어 개방성과 확장성이 뛰어남
• 초대용량 3차원 파일의 효율적 관리 및 초고속 렌더링

지원 포맷 형식

• IFC(Industry Foundation Classes)
• JT(Jupiter Tessellation)
• OBJ
• 3DS
• COLLADA

적용 사례

• 남극과학기지 웹기반 3차원 시설, 기장비 관리시스템
• LiveDroneMap

Getting Started

1. 개발환경 참고 문서

• java8                ● Jasmine
• eclipse neon(필수)        ● Jsdoc
• node                ● Gulp
• apache 2.4.25 Win64       ● eslint
• 웹서버 설정             ● JQuery
• Cesium-Custermizing

2. 소스 설치

• git을 사용하여 git clone (https://github.com/Gaia3D/mago3djs.git) 으로 소스를 C:\git\repository\mago3djs 에 설치

• eclipse를 실행 후 Project Import File -> import -> General -> Projects from Folder or Archive로 mago3djs를 import

• git을 사용하지 않을 경우 Download ZIP 링크를 클릭하여 설치

3. Node 설치

• node에 접속하여 Window Install(.msi) 64-bit를 설치
• 설치가 끝난 뒤 C:\git\repository\mago3djs 디렉토리로 이동
• mago3DJS에 필요한 node_modules를 Node Package Manager 사용하여 설치

  C:\git\repository\mago3djs> npm install

• gulp는 터미널에서 모듈의 명령어를 사용하기 위해 Global로 설치

  C:\git\repository\mago3djs> npm install -g gulp

4. F4D Converter 설치

• www.mago3d.com 에 접속
• Installer : F4D Converter 64bit (this installation requires Windows 7 or later) 설치
• Install Path: C:\F4DConverter\

5. 데이터 변환

• 변한된 데이터(outputFolder)를 저장할 디렉토리를 생성

C:\f4d\프로젝트명 (root folder인 f4d 폴더 아래 프로젝트 별로 디렉토리를 생성) - 변환할 데이터를 C:\demo_f4d(inputFolder)에 저장 - 관리자 권한으로 Command Line Prompt(cmd.exe)를 실행한 다음 F4D Converter가 설치된 디렉토리로 이동 - 다음을 실행

※ F4D Conveter argument 관련 설명은 F4D Conveter참조

C:\F4DConverter>F4DConverter.exe #inputFolder C:\demo_f4d #outputFolder C:\f4d\프로젝트명 #log C:\demo_f4d/logTest.txt #indexing y

- 변환 완료된 F4D 파일들을 mago3D JS 프로젝트에서 웹 서비스로 사용할 수 있도록 Symbolic Link 생성 - 관리자 권한으로 Command Line Prompt(cmd.exe)를 실행하고 mago3D JS 프로젝트로 이동 C:\git\repository\mago3djs

C:\git\repository\mago3djs>mklink /d "C:\git\repository\mago3djs\f4d" "C:\f4d" 
  (삭제의 경우 rmdir data)
  

6. 설정 파일 수정

두 가지의 설정파일을 수정한다. (data.json, policy.json)

data.json

• 크게 세가지 영역으로 나눠진다. 속성값을 저장하는 attributes, 자식 노드 정보를 저장하는 children, 그외 위치 정보를 저장하는 영역
• attributes 영역의 isPhysical 속성은 데이터 표시 여부를 체크하는 필수 속성
• json의 root 노드의 data_key는 f4d 폴더 아래 프로젝트명과 일치

{
    //attributes영역
    "attributes" : {
      "isPhysical" : false,
      "nodeType": "root",
      "projectType": "프로젝트 타입"
    },
    //자식 노드 영역
    "children" : [
    ],
    //위치 정보 영역
    "data_key" : "프로젝트명",
    "data_name" : "프로젝트명"
}

• C:\f4d\프로젝트명 에서 Rendering 할 디렉토리를 찾음
• 디렉토리명에서 F4D_이후의 글자가 고유 식별자
• data.json 파일에서 children의 data_key 값을 고유 식별자로 수정
• lattiude, longitude, height, heading, pitch, roll 값을 적당한 값으로 수정

//자식 노드 영역
"children" : [
   {
     "attributes" : {
       "isPhysical" : true,
       "nodeType" : "..."
     },
     "children" : [
     ],
     "data_key" : "고유 식별자",
     "data_name" : "데이터 이름",
     "latitude" : 위도 입력,
     "longitude" : 경도 입력,
     "height" : 높이 입력,
     "heading" : heading 입력,
     "pitch" : pitch 입력,
     "roll" : roll 입력
  }
]

policy.json

• 초기화시 로딩할 project, Init Camera Latitude, Longitude, CallBack Function, Geo Server 설정

• 페이지 초기화시 로딩할 프로젝트 설정 key값 입력, 복수개의 프로젝트 로딩을 원하는 경우 , 로 추가
  

  "geo_data_default_projects": [
      "data.json"
  ]

• 웹 페이지 시작시 이동할 위치(lattiude, longitude)를 수정
  

  "geo_init_latitude": "위도 입력",
  "geo_init_longitude": "경도 입력"

• Cesium ion Terrain access token 설정

  • mago3D JS 소스를 다운 받을 시에 기본적으로 Cesium World Terrain을 사용합니다.
  • mago3D JS 에서 cesium terrain 적용을 위해 Cesium ion token 발급 (https://cesium.com/ion/signin)
    

    "geo_cesium_ion_token": "cesium ion token"

7. Node Server 실행

// private로 서버를 실행할경우
C:\git\repository\mago3djs>node server.js
// public로 서버를 실행할경우
C:\git\repository\mago3djs>node server.js --public true

8. 브라우저 확인

// Cesium
http:localhost/sample/cesium.html
// WorlWind
http:localhost/sample/worldwind.html

LICENSE

Apache License Version 2.0.

---

Using Google Translator

mago3DJS

Open source JavaScript library for 3D multi-block visualization

Generation 3D GIS platform that integrates and visualizes AEC (Architecture, Engineering, Construction) areas and traditional 3D spatial information (3D GIS). Integrate AEC and 3D GIS in a web browser, indoors, outdoors, indistinguishable. You can browse and collaborate on large-scale BIM (Building Information Modeling), JT (Jupiter Tessellation), and 3D GIS files without installing any programs on the web browser.

Characteristic

• Integration of AEC and 3D GIS
• Seamless connection of indoor and outdoor spaces
• Runs on a web browser and does not require a separate plug-in or ActiveX installation
• It is developed based on open source (Cesium, Web World Wind) and has excellent openness and scalability
• Efficient management and ultra-fast rendering of high-capacity 3-D files

Supported Format Formats

• IFC(Industry Foundation Classes)
• JT(Jupiter Tessellation)
• OBJ
• 3DS
• COLLADA

Application example

• Antarctic Science Base Web-based 3D facility, equipment management system
• LiveDroneMap

Getting Started

1. Development Environment

• java8                ● Jasmine
• eclipse neon(need)       ● Jsdoc
• node                ● Gulp
• apache 2.4.25 Win64       ● eslint
• server settings         ● JQuery
• Cesium-Custermizing

2. Source Download

• Use git to install the source to C:\git\repository\mago3djs with git clone https://github.com/Gaia3D/mago3djs.git.

• Run eclipse and import mago3djs into Project Import File -> import -> General -> Projects from Folder or Archive.

• If you are not using git, click the Download ZIP link to install it.

3. Node Install

• node to install Window Install (.msi) 64-bit.
• After the installation is complete, go to the C:\git\repository\mago3djs directory.
• Use node Package Manager to install node_modules for mago3DJS.

  C:\git\repository\mago3djs> npm install

• gulp installs globally in Terminal to use the module's mockups.

  C:\git\repository\mago3djs> npm install -g gulp

4. F4D Converter Install

• www.mago3d.com 에 접속
• Installer : F4D Converter 64bit (this installation requires Windows 7 or later) 설치
• Install Path: C:\F4DConverter\

5. Data Conversion

• Create a directory to store the changed f4d(outputFolder)

C:\f4d\projectname (Create a directory for each project under the data folder, the root folder) - Save the data to be converted to C:\demo_data(inputFolder) - Run Command Line Prompt (cmd.exe) as an administrator and move to the directory where F4D Converter is installed - Run

※ For a description of F4D Conveter argumentF4D Conveter

C:\F4DConverter>F4DConverter.exe #inputFolder C:\demo_f4d #outputFolder C:\f4d\projectname #log C:\demo_f4d/logTest.txt #indexing y

- Create Symbolic Link to use transformed F4D files as web service in mago3D JS project - Run Command Line Prompt (cmd.exe) with administrative privileges and go to mago3D JS project

C:\mago3djs

C:\mago3djs>mklink /d "C:\git\repository\mago3djs\f4d" "C:\f4d" 
  (delete is rmdir data)

6. Edit Configuration File

Add two configuration files. (data.json, policy.json)

data.json

• It is divided into three major areas. Attributes to store attribute values, children to store child node information, other area to store location information
• The isPhysical attribute of the - attributes field is a mandatory attribute
• The data_key of the root node of json matches the project name under the f4d folder

{
    //attributes area
    "attributes" : {
      "isPhysical" : false,
      "nodeType": "root",
      "projectType": "project Type"
    },
    //Child node area
    "children" : [
    ],
    //Location information area
    "data_key" : "Project name",
    "data_name" : "Project name"
}

• C:\f4d\projectnameto find the directory to render
• The characters after F4D_ in the directory name are unique identifiers
• Modify the data_key value of children from the data.json file to a unique identifier
• Modify latitude, longitude, height, heading, pitch, and roll values to appropriate values

//Child node area
"children" : [
   {
     "attributes" : {
       "isPhysical" : true,
       "nodeType" : "..."
     },
     "children" : [
     ],
     "data_key" : "Unique identifier",
     "data_name" : "Data name",
     "latitude" : Enter latitude,
     "longitude" : Enter longitude,
     "height" : Enter height,
     "heading" : Enter heading,
     "pitch" : Enter pitch,
     "roll" : Enter roll
  }
]

policy.json

• Project to be loaded at initialization, Init Camera Latitude, Longitude, CallBack Function, Geo Server setup

• Enter key value to load when initializing page, , if you want to load multiple projects
  

  "geo_data_default_projects": [
      "data.json"
  ]

• Fix location (lattiude, longitude) to move when web page starts
  

  "geo_init_latitude": "Enter latitude",
  "geo_init_longitude": "Enter longitude"

• Cesium ion Terrain access token setting

  • When downloading the maago3D JS source, the default is to use the Cesium World Terrain.
  • Issued Cesium ion token for cesium terrain application in mago3D JS. (https://cesium.com/ion/signin)
    

     "geo_cesium_ion_token": "cesium ion token" 

7. Running Node Server

// If you run the server privately
C:\git\repository\mago3djs>node server.js
// If you run the server as public
C:\git\repository\mago3djs>node server.js --public true

8. Browser verification

// Cesium
http:localhost/sample/cesium.html
// WorlWind
http:localhost/sample/worldwind.html

LICENSE

Apache License Version 2.0.

---

Googleの翻訳を使用して

mago3DJS

3次元マルチブロック可視化のためのオープンソースのJavaScriptライブラリ

AEC（Architecture、Engineering、Construction）領域と、伝統的な3次元空間情報（3D GIS）を統合的に管理し、可視化する次世代3次元GISプラットフォームです。室内、糸外の区別なくAECと3D GISをWebブラウザに統合されています。大容量BIM（Building Information Modelling）、JT（Jupiter Tessellation）、3D GISファイルなどを、別のプログラムをインストールすることなく、Webブラウザ上で操作してコラボレーションを行うことができます。

特徴

• AECと3D GI