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>
결과화면
'3D Graphics > VTK.js 시작하기' 카테고리의 다른 글
Quasar에서 VTK.js 시작하기 - 3(확장을 위한 임시글) (0) | 2024.06.14 |
---|---|
Quasar에서 VTK.js 시작하기 - 2 (0) | 2024.06.14 |
Quasar에서 VTK.js 시작하기 - 1 (0) | 2024.06.14 |