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

폴리곤 객체 삼각뿔 띄워보기

  vtkActor, vtkMapper 등등은 기본적인 VTK 사용방법 그대로 사용하면 됩니다.

  VTK.js에서 다른 점은 renderer와 renderwindow를 설정할때인데, VTK는 생성해서 사용했지만 여기서는  vtkGenericRenderWindow에서 미리 생성된 값을 받아와서 설정해줘야 한다는 것입니다.

  

<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 vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import vtkRenderer from '@kitware/vtk.js/Rendering/Core/Renderer';
import vtkRenderWindow from '@kitware/vtk.js/Rendering/Core/RenderWindow';
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();

// vtk 관련 변수들
const coneSource = vtkConeSource.newInstance({ height: 1.0 });
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
let renderer = vtkRenderer.newInstance();
let renderWindow = vtkRenderWindow.newInstance();

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

    // renderer와 renderWindow는 vtkGenericWindow에서 생성된 것을 가져와서 사용
    renderer = vtkGenericWindow.getRenderer();
    renderWindow = vtkGenericWindow.getRenderWindow();

    // VTK에서 기본적으로 제공하는 폴리곤 출력하는 예제 코드와 동일함
    coneSource.setResolution(40);
    mapper.setInputConnection(coneSource.getOutputPort());
    actor.setMapper(mapper);
    renderer.addActor(actor);
    renderer.resetCamera();
    renderWindow.render();
  } else {
    console.error('refDivVTK is null');
  }
});
</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