Getting Started
VIZCore3D의 시작페이지를 구성하고 로컬에서 실행할 수 있습니다.
시작페이지 구성하기
JS(JavaScript)에서 구성하기
HTML 파일에 CSS를 추가합니다.
<link rel="stylesheet" href="VIZCore3D/Resource/css/VIZCore.css">
VIZCore3D의 Script를 추가합니다.
// <script>타입을 module로 설정 ( ES6에서 사용되는 타입 )
<script type="module">
// VIZ3DCore, VIZCore 추가
import VIZ3DCore from "./VIZCore3D/VIZCore.js";
import { VIZCore } from "./VIZCore3D/VIZCore.js";
// <body>에 등록된 <div> id를 변수로 지정
let view = document.getElementById("view");
view.className = "VIZCore";
// VIZ3DCore 인스턴스 생성
let vizcore = new VIZ3DCore(view);
let onConfiguration = () => {
// VIZCore 경로 설정
vizcore.Configuration.Default.Path = "./VIZCore3D/";
// WebAssembly 경로 설정
vizcore.Configuration.Default.WebAssembly.Path = "./VIZCore3D/lib/shdcore/shdcore.wasm";
};
let onBefore = () => {
// 전 처리 작업시 사용
};
let onInit = () => {
// ContextMenu 사용
let context = new vizcore.ContextMenu(view, vizcore, VIZCore);
// 분할 VIZW 모델 파일 열기
vizcore.Model.OpenHeader("./VIZCore3D/Model/toycar/vizw/toycar_wh.vizw", "Sample");
// 단일 VIZW 모델 파일 열기
// vizcore.Model.Open("./VIZCore3D/Model/toycar.vizw");
};
let option = {
event : {
onInit : onInit,
onBefore : onBefore,
onConfiguration : onConfiguration,
}
}
vizcore.Init(option);
</script>
VIZCore3D 뷰어(Viewer)가 들어가야 할 부분의 영역을 설정합니다.
<body>
<div id="view"></div>
</body>
Vue에서 구성하기
Vue 설치 후 설치 페이지에 안내대로 프로젝트를 생성합니다.
Vue 프로젝트의 src 폴더에 전달받은 VIZCore3D 폴더를 복사합니다.
src/VIZCore3D
Vue 프로젝트의 public 폴더에 VIZCore3D 빈 폴더를 생성합니다.
public/VIZCore3D(빈 폴더)
public 폴더에 생성한 VIZCore3D 폴더에 전달받은 VIZCore3D 폴더에 있는 아래의 폴더들을 이동 또는 복사합니다.
VIZCore3D/libVIZCore3D/ModelVIZCore3D/Resource
- 완성된 폴더 구조 보기
src 폴더에 있는 main.js파일에 CSS를 추가합니다.
import './VIZCore3D/Resource/css/VIZCore.css'
import './VIZCore3D/Resource/css/VIZCore.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
src 폴더에 있는 App.vue파일에 VIZCore3D Initialization 를 추가합니다.
<script>
import VIZ3DCore from "./VIZCore3D/VIZCore.js";
import { VIZCore } from "./VIZCore3D/VIZCore.js";
export default {
mounted() {
let view = document.getElementById("view");
view.className = "VIZCore";
let vizcore = new VIZ3DCore(view);
let onConfiguration =()=>{
// VIZCore 경로 설정
vizcore.Configuration.Default.Path = "./VIZCore3D/";
// WebAssembly 경로 설정
vizcore.Configuration.Default.WebAssembly.Path = "./VIZCore3D/lib/shdcore/shdcore.wasm";
};
let onBefore =()=>{
// 전 처리 작업시 사용
};
let onInit = ()=>{
// ContextMenu 사용
let context = new vizcore.ContextMenu(view, vizcore, VIZCore);
// 분할 VIZW 모델 파일 열기
vizcore.Model.OpenHeader("./public/VIZCore3D/Model/toycar/vizw/toycar_wh.vizw", "Sample");
// 단일 VIZW 모델 파일 열기
// vizcore.Model.Open("./public/VIZCore3D/Model/toycar.vizw");
};
let option = {
event : {
onInit : onInit,
onBefore : onBefore,
onConfiguration : onConfiguration,
}
}
vizcore.Init(option);
}
}
</script>
<template>
<div id="app">
<div id="view"></div>
</div>
</template>
<style scoped>
</style>
라이선스 서버 연결 방법
VIZCore3D 폴더에서 Configuration.js 파일을 편집기로 열어 수정합니다.
...
this.AUTHORITY_PARAMS = {
Data: 'http://127.0.0.1:8901'
};
...
로컬 실행 방법
VSCode Extensions 에서 Live Server 검색 후 설치합니다.
index.html 우클릭 후 Open with Live Server 클릭하여 실행합니다.
VSCode에서 터미널 실행합니다.
Vue 프로젝트 폴더로 이동 후 터미널 창에 명령어 입력합니다.
명령어 :
npm run dev
Last modified: 26 July 2024