VTK.js의 화면 크기 설정하기

vue3, quasar, typescript를 이용한 프로젝트에서 vtkGenericRenderWindow를 이용하여 화면을 html 요소의 배치에 맞게 크기 설정하기

 

<template>
  <q-page>
    <div class="row bg-secondary justify-around">
      <q-btn class="col-3 bg-primary">A</q-btn>
      <q-btn class="col-3 bg-primary">B</q-btn>
      <q-btn class="col-3 bg-primary">C</q-btn>
    </div>

    <div class="row">
      <div class="col-3 bg-primary" />
      <div class="col-6" ref="vtkContainer" />
      <div class="col-3 bg-primary" />
    </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';

const vtkContainer = ref<HTMLElement | null>(null);
const coneSource = vtkConeSource.newInstance({ height: 1.0 });
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
let renderWindow = vtkRenderWindow.newInstance();
let renderer = vtkRenderer.newInstance();
let openGLWindow = vtkGenericRenderWindow.newInstance();

onMounted(() => {
  if (vtkContainer.value !== null) {
    openGLWindow.setContainer(vtkContainer.value);

    renderer = openGLWindow.getRenderer();
    renderWindow = openGLWindow.getRenderWindow();

    coneSource.setResolution(40);
    mapper.setInputConnection(coneSource.getOutputPort());
    actor.setMapper(mapper);

    renderer.addActor(actor);
    renderer.resetCamera();
    renderWindow.render();
  } else {
    console.error('vtkContainer is null');
  }
});
</script>

 

결과화면