Skip to content

Gaia3D/mago3djs

Repository files navigation

Build Status License

Korean Englsh Japan

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.