본문으로 건너뛰기

Getting Started

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

시작페이지 구성하기​

JS (JavaScript)에서 구성하기​

1️⃣ HTML 파일에 CSS 추가​

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

2️⃣ VIZCore2D Script 추가​

:::details VIZCore2D Script

<script type="module">
  // VIZ2DCore 추가
  import VIZ2DCore from "./VIZCore2D/VIZCore2D.js";

  // <body>에 등록된 <div> id를 변수로 지정
  const view = document.getElementById("view2D");
  view.className = "VIZCore";

  // VIZ2DCore 인스턴스 생성
  const vizcore2d = new VIZ2DCore(view);

  // 초기화 완료 이벤트
  const onInit = () => {
    console.log("[VIZCore2D] : Initialize!");

    const onload = (e) => {
      console.log("onload", e);
    };

    const onerror = () => {
      console.log("onerror");
    };

    // vizx2d 모델 파일 열기
    vizcore2d.Model.OpenFile(
      "./model/Sample.vizx2d",
      onload,
      onerror
    );
  };

  const option = {
    event: {
      onInit,
    },
  };

  vizcore2d.Init(option);
</script>

:::

3️⃣ Viewer 영역 설정​

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

라이선스 서버 연결 방법​

노트

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

VIZCore2D 폴더의 Configuration.js 파일을 열어 아래와 같이 수정합니다.

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

로컬 실행 방법​

팁

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

실행 절차​

  1. VSCode Extensions에서 Live Server 검색 후 설치

Live Server 설치

  1. index.html 우클릭 → Open with Live Server 클릭

Open with Live Server