Getting Started

VIZWide3D 를 웹 페이지에 넣고 모델을 여는 절차는 버전과 관계없이 같습니다. 코드만 버전마다 다르므로, 절차는 이 페이지에서 보고 코드는 사용하는 버전의 페이지에서 보세요.

명칭

• VIZWide3D — 제품 이름입니다.
• VIZCore3D — 뷰어 모듈 이름입니다. 배포 폴더 VIZCore3D/ 와 스크립트 VIZCore3D.js 의 이름으로 쓰입니다. 데스크톱 제품 VIZCore3D.NET 과는 다른 제품입니다.
• VIZWeb_Main — 뷰어가 들어가는 최상위 컨테이너의 CSS 클래스입니다.

---

지원 버전

버전	상태	시작 페이지
3.0	현재 표준	3.0 시작하기
2.1	이전 버전 (Legacy)	2.1 시작하기

---

공통 절차

1. 패키지 배치 — index.html 옆에 VIZCore3D/ 를 둡니다. 샘플 모델 위치는 버전 페이지의 1절을 따릅니다.
2. 뷰어 페이지 작성 — 뷰어 모듈을 import 하고 컨테이너 요소를 만들어 인스턴스를 생성합니다.
3. 초기화 — onConfiguration(엔진이 뜨기 전 설정) → 엔진 초기화 → onInit(API 사용 가능) 순서로 진행됩니다. 모델 열기 등 API 호출은 onInit 이후에 합니다.
4. 라이선스 서버 연결 — 라이선스 서버 기본 포트는 8901 입니다. 연결되지 않으면 화면에 License error! 창이 뜨고 모델이 보이지 않습니다.
5. 모델 열기와 로딩 완료 판단 — 모델을 연 뒤 구조(트리)가 준비된 시점과 형상이 준비된 시점을 구분해 처리합니다.
6. 프레임워크에서 쓸 때 — Vue, React 등에서는 뷰어 컨테이너가 DOM 에 붙은 뒤(예: Vue 의 mounted) 인스턴스를 만들고 Init 을 호출합니다. 프로젝트 만들기는 아래 프레임워크 프로젝트 준비를 보세요.
7. 로컬 실행 — VSCode Live Server 등 정적 서버로 index.html 을 엽니다.

프레임워크 프로젝트 준비

프로젝트를 만드는 방법은 버전과 관계없이 같습니다. 만든 뒤 뷰어를 넣는 방법은 사용하는 버전 페이지의 6절을 보세요.

프레임워크	프로젝트 생성	로컬 실행	참고
Vue	npm create vue@latest	npm run dev	Vue 빠른 시작
React	npm create vite@latest → React 선택	npm run dev	Vite 시작하기

---

버전별 차이 한눈에 보기

항목	2.1	3.0
진입 파일	VIZCore3D/VIZCore.js	VIZCore3D/VIZCore3D.js
import	두 개 VIZ3DCore (default) { VIZCore }	한 개 VIZCore3DModule (default)
인스턴스 생성	new VIZ3DCore(view)	new VIZCore3DModule(view)
뷰 요소	div#view.VIZCore CSS link 필요	div#view.VIZCore3D CSS 는 번들에 포함
초기화 이벤트	onInit onBefore onConfiguration	onInit onConfiguration onInitFailed
라이선스	Configuration.js 의 AUTHORITY_PARAMS 편집	Config.GetLicenseInfo() 의 url 수정 후 Config.SetLicenseInfo(license)
모델 열기	Model.OpenHeader(url, key, cb)	Model.OpenFile(key, url, onload, onerror)
로딩 완료 판단	loadType 값 COMPLETEDTIME.STRUCTURE COMPLETEDTIME.MESH	e.kind 값 ImportFiledataKind.Structure ImportFiledataKind.Meshblock

2.1 의 상수 전체 경로는 VIZCore.Enum.CONFIG_KEY.LOADER.COMPLETEDTIME, 3.0 은 vizcore.Enum.ImportFiledataKind 입니다. 모든 페이지에서 뷰 요소는 div.VIZWeb_Main 안에 둡니다.