React를 이용한 VTK.js 개발하기

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