node.js(npm 사용하기 위해)을 설치
yarn(npm와 비슷한 모듈 설치 매니져)을 npm을 이용하여 설치
npm install --global yarn
React 프로젝트 생성
yarn create react-app <app-name>
vtk 설치
cd <app-name>
yarn add @kitware/vtk.js
src/App.js 파일을 아래의 코드로 덮어쓰기
더보기
import './App.css'
import { useRef, useEffect } from 'react';
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 vtkOpenGLRenderWindow from '@kitware/vtk.js/Rendering/OpenGL/RenderWindow';
import vtkRenderWindowInteractor from '@kitware/vtk.js/Rendering/Core/RenderWindowInteractor';
import vtkInteractorStyleTrackballCamera from '@kitware/vtk.js/Interaction/Style/InteractorStyleTrackballCamera';
function App() {
const vtkContainerRef = useRef(null);
const context = useRef(null);
const onClicked = () => {
console.log('btn clicked!')
};
useEffect(() => {
if (!context.current) {
const coneSource = vtkConeSource.newInstance({ height: 1.0 });
const mapper = vtkMapper.newInstance();
const renderWindow = vtkRenderWindow.newInstance();
const renderer = vtkRenderer.newInstance({ background: [0.2, 0.3, 0.4] });
const actor = vtkActor.newInstance();
const openglRenderWindow = vtkOpenGLRenderWindow.newInstance();
const interactor = vtkRenderWindowInteractor.newInstance();
const interactorStyle = vtkInteractorStyleTrackballCamera.newInstance()
mapper.setInputConnection(coneSource.getOutputPort());
actor.setMapper(mapper);
renderWindow.addRenderer(renderer);
renderWindow.addView(openglRenderWindow);
openglRenderWindow.setContainer(vtkContainerRef.current);
renderer.addActor(actor);
renderer.resetCamera();
interactor.setView(openglRenderWindow);
interactor.initialize();
interactor.bindEvents(vtkContainerRef.current);
interactor.setInteractorStyle(interactorStyle);
context.current = {
coneSource,
mapper,
renderWindow,
renderer,
actor,
openglRenderWindow,
interactor,
interactorStyle
};
}
return () => {
if (context.current) {
const { coneSource,
mapper,
renderWindow,
renderer,
actor,
openglRenderWindow,
interactor,
interactorStyle } = context.current;
coneSource.delete();
mapper.delete();
renderWindow.delete();
renderer.delete();
actor.delete();
openglRenderWindow.delete();
interactor.delete();
interactorStyle.delete();
context.current = null;
}
};
}, [vtkContainerRef]);
return (
<div>
<h2>ON3D Colud Service</h2>
<div className="mainView" ref={vtkContainerRef} />
<a href="#" className="button big orange" onClick={onClicked}>Button</a>
</div>
);
}
export default App;
프로그램 구동
yarn start
참고한 사이트 https://kitware.github.io/vtk-js/docs/vtk_react.html
'ETC' 카테고리의 다른 글
수학 관련 용어 (0) | 2023.04.26 |
---|---|
vtkRenderWindow를 div에 연결하기 - Vue (0) | 2022.05.24 |
BCI 관련 자료들 (0) | 2021.12.20 |
Simple Volume Rendering App - React (0) | 2021.12.11 |
Volume Rendering - React (0) | 2021.12.05 |