Displaying vtk files on electron(Node.js) application

Web
1

Hello,
I’m developing an application using Electron and one of the key features is being able to read/display vtk/vtu files. Playing around with VTK.js and react and I think I’m close to doing it but I’m not sure what exactly to return.

import React from 'react';
import { useState, useRef, useEffect } from 'react';


import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkPolyDataReader from '@kitware/vtk.js/IO/Legacy/PolyDataReader';

// eslint-disable-next-line react/prefer-stateless-function
class LoadVTK extends React.Component {
  render() {
    const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();

    const resetCamera = renderer.resetCamera;
    const render = renderWindow.render;

    const reader = vtkPolyDataReader.newInstance();
    reader.setUrl('skin.vtk').then(() => {
      const polydata = reader.getOutputData(0);
      const mapper = vtkMapper.newInstance();
      const actor = vtkActor.newInstance();

      actor.setMapper(mapper);
      mapper.setInputData(polydata);

      renderer.addActor(actor);

      resetCamera();
      render();

    });

    return (
      <div></div>
    );
  }
}

export default LoadVTK;

Not exactly sure what tags/information to return.
Followed this post: reactjs - VTK.js, React, JavaScript: Load VTK files - Stack Overflow
And also following this doc: Using vtk.js with React | vtk.js

The issue is probably very simple but I’m not well versed with these tags. Any help or points to the right direction would be greatly appreciated.

2

vtkFullScreenRenderWindow adds a div element to the body, so it won’t render into your component, per-say.

If you are trying to render a vtk.js viewport with a component, here is the typical approach:

  1. Return a referenceable container element from your render function
  2. use vtkRenderWindow and vtkRenderer to set up your viewport, or use vtkFullScreenRenderWindow and pass in a rootContainer
  3. Once the reader loads your data, add the actor into the scene

A direct translation of the second doc you linked from react hooks to class component should get you on the right track.