Getting Started

VIZCore3D의 시작 페이지를 구성하고 로컬에서 실행할 수 있습니다.

시작 페이지 구성하기

JS (JavaScript)에서 구성하기

노트

기본 제공되는
index.html 파일에 대한 설명입니다.

1. HTML 파일에 CSS 추가

<link rel="stylesheet" href="VIZCore3D/Resource/css/VIZCore.css">

2. VIZCore3D Script 추가

VIZCore3D Script 보기

<script type="module">
import VIZ3DCore from "./VIZCore3D/VIZCore.js";
import { VIZCore } from "./VIZCore3D/VIZCore.js";

let view = document.getElementById("view");
view.className = "VIZCore";

let vizcore = new VIZ3DCore(view);

let onConfiguration = () => {
  vizcore.Configuration.Default.Path = "./VIZCore3D/";
  vizcore.Configuration.Default.WebAssembly.Path =
    "./VIZCore3D/lib/shdcore/shdcore.wasm";
};

let onBefore = () => {
  // 전 처리
};

let onInit = () => {
  let context = new vizcore.ContextMenu(view, vizcore, VIZCore);

  vizcore.Model.OpenHeader(
    "./VIZCore3D/Model/toycar/vizw/toycar_wh.vizw",
    "Sample"
  );
};

vizcore.Init({
  event: {
    onInit,
    onBefore,
    onConfiguration,
  },
});
</script>

3. Viewer 영역 설정

<body>
  <div id="view"></div>
</body>

Vue에서 구성하기

노트

신규 Vue 프로젝트와 기존 Vue 프로젝트 모두 동일한 방식으로 구성합니다.

1. Vue 프로젝트 생성

Vue 설치 가이드

2. src 폴더에 VIZCore3D 복사

src/VIZCore3D

3. public 폴더에 빈 VIZCore3D 폴더 생성

public/VIZCore3D

4. public 폴더에 리소스 이동

VIZCore3D/lib
VIZCore3D/Model
VIZCore3D/Resource

완성된 폴더 구조 보기

5. main.js에 CSS 추가

import './VIZCore3D/Resource/css/VIZCore.css'

전체 main.js 코드

import './VIZCore3D/Resource/css/VIZCore.css'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

6. App.vue에 Initialization 추가

전체 App.vue 코드

<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);

    vizcore.Init({
      event: {
        onConfiguration() {
          vizcore.Configuration.Default.Path = "./VIZCore3D/";
          vizcore.Configuration.Default.WebAssembly.Path =
            "./VIZCore3D/lib/shdcore/shdcore.wasm";
        },
        onInit() {
          let context = new vizcore.ContextMenu(view, vizcore, VIZCore);
          vizcore.Model.OpenHeader(
            "./public/VIZCore3D/Model/toycar/vizw/toycar_wh.vizw",
            "Sample"
          );
        },
      },
    });
  },
};
</script>

<template>
  <div id="app">
    <div id="view"></div>
  </div>
</template>

라이선스 서버 연결 방법

노트

라이선스 서버 기본 포트는 8901 입니다.

VIZCore3D/Configuration.js 파일을 열어 아래와 같이 수정합니다.

this.AUTHORITY_PARAMS = {
  Data: 'http://127.0.0.1:8901'
};

로컬 실행 방법

정보

VSCode 기준으로 설명하며
VSCode 사용을 권장합니다.

JS 실행

VSCode Extensions에서 Live Server 설치
index.html 우클릭 → Open with Live Server

Vue 실행

VSCode 터미널 실행
프로젝트 폴더에서 실행

npm run dev

시작 페이지 구성하기​

JS (JavaScript)에서 구성하기​

1. HTML 파일에 CSS 추가​

2. VIZCore3D Script 추가​

3. Viewer 영역 설정​

Vue에서 구성하기​

1. Vue 프로젝트 생성​

2. src 폴더에 VIZCore3D 복사​

3. public 폴더에 빈 VIZCore3D 폴더 생성​

4. public 폴더에 리소스 이동​

5. main.js에 CSS 추가​

6. App.vue에 Initialization 추가​

라이선스 서버 연결 방법​

로컬 실행 방법​

JS 실행​

Vue 실행​