Quasar에서 VTK.js 시작하기 - 1

개요

VTK.js를 설정하여 빈 화면 출력을 해보겠습니다. 

Vue에서 유명한 UI 라이브러리인 Quasar를 이용하여 전체적인 레이아웃을 잡도록 하겠습니다.

Quasar를 설치하는 것은 다음글(https://dev-leon.tistory.com/57)을 참고 하세요.

 

순서

 1. Quasar 설치(설치글을 보고 설치 진행)

 2. VTK.js 설치

     - VSCode 터미널 창에서 설치된 프로젝트 디렉토리로 이동

     - $npm install @kitware/vtk.js 

    참조 : https://kitware.github.io/vtk-js/docs/vtk_vue.html

 

  3. 참고 사항

     - Typescript를 이용하여 개발함.

     - vtkGenericRenderWindow를 이용하여 화면을 <div>에 연결해야 함. 그 이유는 VTK.js의 시작 예제에서 사용한 vtkFullScreenRenderWindow는 화면의 위치와 크기를 HTML요소에 맞게 배치하기 어렵기 때문.

 

  4. javascript es6 호환성 설정을 위해 quasar.config.js 파일에 아래와 같이 설정

	module.exports = configure(function (/* ctx */) {
	........
	    // VTK.js for compatible with ES6 modules
		transpileDependencies: ['@kitware/vtk.js'],
	........
	});

 

  5. 아래의 코드를 IndexPage.vue에 덮어쓰기

     - UI는 Quasar의 Class Helper를 이용하여 가로 3분할(1:2:1)하였음.

     - 3분할된 UI 중에서 가운데에 VTK.js 가 들어가도록 배치함.

<template>
  <q-page>
    <!-- 3개의 화면으로 분할하여 가운데에 VTK 화면이 오도록 함 -->
    <div class="row">
      <div class="col-3 bg-primary"></div>
      <div class="col-6" ref="refDivVTK"></div>
      <div class="col-3 bg-primary"></div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

import '@kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkGenericRenderWindow from '@kitware/vtk.js/Rendering/Misc/GenericRenderWindow';

// div 요소를 참조하기 위한 ref 변수인데 onMounted 함수에서 생성이 되기 때문에 null로 초기화했다가
// onMounted 함수에서 div 요소가 생성되면 해당 div 요소를 ref 변수에 설정하기 위해 중복 타입으로 설정
const refDivVTK = ref<HTMLElement | null>(null);
const vtkGenericWindow = vtkGenericRenderWindow.newInstance();

onMounted(() => {
  // typescript특성상 div 요소가 null이 아니라는 것을 명시적으로 작성해야 안전한 코딩이 됨
  if (refDivVTK.value !== null) {
    vtkGenericWindow.setContainer(refDivVTK.value);
  }
});
</script>

 

결과 화면

이상입니다.

 

 

Quasar에서 VTK.js 시작하기 - 1 : https://dev-leon.tistory.com/76
Quasar에서 VTK.js 시작하기 - 2 : https://dev-leon.tistory.com/77
Quasar에서 VTK.js 시작하기 - 3 : https://dev-leon.tistory.com/78