About mago3djs

3D Rendering Library

g

Published by

gaia3d

Visit View Profile

README.md

View on GitHub

Build Status

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. 개발환경 참고 문서

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

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 GISの統合
室内外空間のシームレスな連携
Webブラウザ上で駆動され、別のプラグインやActiveXのインストールが不要
オープンソース（Cesium、Web World Wind）をベースに開発され、オープンで拡張性に優れる
大容量3次元ファイルの効率的な管理と超高速レンダリング

対応フォーマット形式

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

適用事例

南極科学基地のWebベースの3次元設備、基装備管理システム
LiveDroneMap

Getting Started

1. 開発環境参考文書

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\mago3DJSディレクトリに移動します。
mago3DJSに必要なnode_modulesをNode Package Managerを使用してインストールします。
```
C:\git\repository\mago3djs> npm install
```
gulpはモジュールを端末の全ユーザーが使用する場合に使用します。
```
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であるdataフォルダの下のプロジェクトごとにディレクトリを作成）
変換するデータを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プロジェクトでは、Webサービスとして利用できるようにSymbolic Linkを作成
- 管理者権限でCommand Line Prompt（cmd.exe）を実行して、mago3D JSプロジェクトに移動
  C:\mago3djs
```
C:\mago3djs>mklink /d "C:\git\repository\mago3djs\f4d" "C:\f4d" 
(削除の場合 rmdir data)
```

6. 設定ファイルを変更する

二種類の設定ファイルを追加します。 (data.json, policy.json)

data.json

大きく3つのエリアに分けられる。属性値を格納する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値を一意の識別子として修正

latitude、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"
]
```

Webページの開始時に移動先（lattiude、longitude）を修正

"geo_init_latitude": "緯度の入力",
"geo_init_longitude": "硬度入力"

セシウムイオン地形アクセストークンの設定
- maago3D JSソースをダウンロードするとき、デフォルトでセシウム世界地形が使用されます。
- mago3D JSにおけるセシウム地形適用のためのセシウムイオントークン発行。（https://cesium.com/ion/signin）
```
 "geo_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. Browser verification

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

LICENSE

Apache License Version 2.0.

mago3djs

About mago3djs

Platforms

Languages

Links

README.md

mago3DJS

특징

지원 포맷 형식

적용 사례

Getting Started

1. 개발환경 참고 문서

2. 소스 설치

3. Node 설치

4. F4D Converter 설치

5. 데이터 변환

6. 설정 파일 수정

data.json

policy.json

7. Node Server 실행

8. 브라우저 확인

LICENSE

Using Google Translator

mago3DJS

Characteristic

Supported Format Formats

Application example

Getting Started

1. Development Environment

2. Source Download

3. Node Install

4. F4D Converter Install

5. Data Conversion

6. Edit Configuration File

data.json

policy.json

7. Running Node Server

8. Browser verification

LICENSE

Googleの翻訳を使用して

mago3DJS

特徴

対応フォーマット形式

適用事例

Getting Started

1. 開発環境参考文書

2. ソースインストール

3. Node のインストール

4. F4D Converterインストール

5. データ変換

6. 設定ファイルを変更する

data.json

policy.json

7. Node Serverを実行

8. Browser verification

LICENSE