Threejs를 이용하여 만든 라이브러리
npm을 이용하여 ThreeJS를 설치합니다.npm install three --save와 npm install @types/three --save를 진행하여 ThreeJS는 Typescript용 인덱스까지 설치를 진행함
설정이 완료 되면 설치가 완료된 경로를 지정하여 import를 진행.
//ThreeJS
import * as THREE from 'three';
//libs
import ThreeJsLib, { ThreeJSEventList, TransfromControlSetMode } from '../libs/threejs/ThreeJsLib';
변수를 할당하고 초기화 하는 부분에서 초기화를 진행함
//라이브러리 초기화
this.tjLib = new ThreeJsLib( divDocument, divDocumentWidth, divDocumentHeight, window.devicePixelRatio);
※ 주의점 : divDocument는 Threejs를 넣으려는 공간을 만들어 초기화를 진행해야함. div안에서의 사이즈가 만들어져 divDocumentWidth, divDocumentHeight를 div와 다르게 설정 시 빈공간 또는 잘림이 생길 수 있음
this.tjLib.SetSceneSize(divDocumentWidth, divDocumentHeight) 함수를 통하여 div내에서 화면 크기를 조정할 수 있음
콜백 이벤트는 Threejs를 이용하면서 생기는 이벤트를 콜백해주는 기능으로 이벤트의 사용법은 아래처럼 사용됨
this.tjLib.ClickObjectEvent = (obj: THREE.Object3D, position: THREE.Vector3) => {
console.log("클릭 오브젝트 확인 >> ", obj.name);
console.log("클릭 오브젝트의 클릭된 위치 확인 >> ", position);
};
이벤트의 종류는 아래와 같은 변수로 지정되어 있으며 각 변수마다의 기능아래와 같음
AnimateEvent --> 랜더링이 진행되는 프레임당 한번씩 콜백이 진행됨
AddLineEvent --> 라인이 추가될 때 콜백이 진행됨
AddPolygonEvent --> 폴리콘이 추가될 때 콜백이 진행됨
AddPOIEvent --> POI가 추가될 때 콜백이 진행됨
AddObjectEvent --> 오브젝트가 추될 때 콜백이 진행됨
AddLayerEvent --> 레이어가 추가될 때 콜백이 진행됨
ClickObjectEvent --> 오브젝트 클릭이 있을 때 콜백이 진행됨
각 변수별 콜백으로 나오는 값들은 아래와 같음
AnimateEvent = (없음) => {}
AddLineEvent = (오브젝트이름, 오브젝트) => {}
AddPolygonEvent = (오브젝트이름, 오브젝트) => {}
AddPOIEvent = (오브젝트이름, 오브젝트) => {}
AddObjectEvent = (오브젝트이름, 오브젝트) => {}
AddLayerEvent = (오브젝트이름, 오브젝트) => {}
ClickObjectEvent = (오브젝트, 클릭 된 위치) => {}
※ 주의점 : 한번 선언한뒤 다른곳에서 선언시 재 선언된 곳으로 초기화가 진행됨
해당 라이브러리의 모든 기능은 레이어안에 오브젝트가 있는 방식으로 처리됨
레이어는 CreateLayer(레이어명)을 통하여 레이어를 생성 할 수 있으며 오브젝트는 오브젝트 생성에 관련된 기능을 통하여 생성이 가능함
레이어를 미리 생성하고 오브젝트를 만들지 않더라도 레이어는 자동으로 관리되어 중복생성이 되지 않으며 레이어를 삭제하면 자동으로 오브젝트도 삭제됨
CreateLayer(레이어명)함수는 레이어를 생성
GetLayerGrpInNames() 함수는 그룹에 등록된 모든 레이어를 가져와 리스트로 명칭을 보여줌
GetLayer(레이어명)함수는 레이어를 객체로 가져올 수 있음
RemoveLayerFromName(레이어명)을 통하여 레이어 삭제가 가능함
오브젝트를 생성하는 함수는 따로 없음
GetLayerInObjectNames(레이어명) 레이어안에 들어 있는 오브젝트의 모든 이름을 가져옴
GetLayerInObject(레이어명, 오브젝트명) 레이어안에 있는 오브젝트를 이름으로 찾아서 오브젝트를 가져옴
RemoveLayerInObjectFromName(레이어명, 오브젝트명) 레이어에 할당된 오브젝트를 이름으로 찾아서 제거함
RemoveLayerInObject(오브젝트 객체) 레이어에 할당된 오브젝트를 찾아서 제거함
GISControl.AddPOI() 화면에 지정한 이미지와 글씨를 입력하여 POI를 생성
GISControl.AddLine() 화면에 지정한 2개의 포인트를 이용하여 라인생성
GISControl.AddPolygon() 을 이용하여 여려개의 점을 연결한 다각형을 생성
GISControl.AddPolygonPlusPosition() 를 이용하여 기존에 생성된 다각형에 점을 추가하거나 계속해서 점을 추가하는 다각형 기능으로 사용자가 범위를 지정할 때 사용
각 확장자의 모델을 화면에 뿌려주는 기능
ObjectControl.Add3DS() -> .3ds 파일
ObjectControl.AddOBJ() -> .obj 파일
ObjectControl.AddGLTF() -> .gltf 파일
ObjectControl.AddFBX() -> .fbx 파일
ObjectControl.AddXYZ() -> .xyz 파일
ObjectControl.AddXYZRawData() -> XYZ 형식으로 되어있는 텍스트를 받아서 처리함
오브젝트의 위치와 방향 수정은 코드로 진행하는 수정과 화면에서 사용자가 직접 수정하는 기능으로 구분되어 있음
SetObjectPosition()과 SetObjectRotation()또는 직접 오브젝트의 객체에 접근해 Position.set(), Rotate.set()을 이용해 오브젝트의 위치와 방향을 수정할 수 있음
사용자가 직접 수정하는 것은 SetEditModeObj(오브젝트)기능을 이용하여 해당 오브젝트를 수정모드 이용함 SetEditMode()를 통해 수정되는 수정 방식을 지정할 수 있음.
기능 구분으로는 TransfromControlSetMode enum을 사용하며 해당 기능들은 아래와 같음
'space_local' -> 오브젝트 기준위치로 설정
'space_world' -> 글로벌 기준위치로 설정
'translate' -> 위치 변경 모드로 설정
'rotate' -> 방향 회전 모드로 설정
'scale' -> 크기 조절 모드로 설정
'show_x' -> x축을 활성/비활성
'show_y' -> y축을 활성/비활성
'show_z' -> z축을 활성/비활성
'enabled' -> 수정 모드의 가이드 라이를 활성/비활성
수정이 완료된 오브젝트는 EndEditModeObj()를 통하여 수정모드를 종료할 수 있음