Rendering a .vtu file using vtk-js with React

Web
1

Hi,

I’m following this tutorial, slightly modifying it in the attempt to render a mesh we’ve created using gmsh and converted into a .vtu format.

I’ve got a pseudo-API running on localhost that serves statically the XML file as plain text. I’ve failed so far in finding a way to configure the data pipeline, in order for the React + vtk-js to properly render the mesh.

The code for the React app follows:

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

import '@kitware/vtk.js/Rendering/Profiles/Geometry';

import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';

import vtkActor           from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper          from '@kitware/vtk.js/Rendering/Core/Mapper';

import vtkXMLPolyDataReader from '@kitware/vtk.js/IO/XML/XMLPolyDataReader';

function App() {
  const vtkContainerRef = useRef(null);
  const context = useRef(null);
  const [representation, setRepresentation] = useState(2);

  useEffect(() => {
    if (!context.current) {
      const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
        rootContainer: vtkContainerRef.current,
      });
      
      const renderer = fullScreenRenderer.getRenderer();
      const renderWindow = fullScreenRenderer.getRenderWindow();


      const reader = vtkXMLPolyDataReader.newInstance();
      reader.setUrl('http://localhost:8000/mesh');
      const polydata = reader.getOutputData();
      const mapper = vtkMapper.newInstance();
      mapper.setInputData(polydata);

      const actor = vtkActor.newInstance();
      actor.setMapper(mapper);
      renderer.addActor(actor);
      renderer.resetCamera();
      renderWindow.render();
        
      context.current = {
        fullScreenRenderer,
        renderWindow,
        renderer,
        polydata,
        actor,
        mapper,
      };
    }

    return () => {
      if (context.current) {
        const { fullScreenRenderer, actor, mapper } = context.current;
        actor.delete();
        mapper.delete();
        fullScreenRenderer.delete();
        context.current = null;
      }
    };
  }, [vtkContainerRef]);

  useEffect(() => {
    if (context.current) {
      const { renderWindow } = context.current;
      renderWindow.render();
    }
  }, [vtkContainerRef]);

  useEffect(() => {
    if (context.current) {
      const { actor, renderWindow } = context.current;
      actor.getProperty().setRepresentation(representation);
      renderWindow.render();
    }
  }, [representation]);

  return (
    <div>
      <div ref={vtkContainerRef} />
      <table
        style={{
          position: 'absolute',
          top: '25px',
          left: '25px',
          background: 'white',
          padding: '12px',
        }}
      >
        <tbody>
          <tr>
            <td>
              <select
                value={representation}
                style={{ width: '100%' }}
                onInput={(ev) => setRepresentation(Number(ev.target.value))}
              >
                <option value="0">Points</option>
                <option value="1">Wireframe</option>
                <option value="2">Surface</option>
              </select>
            </td>
          </tr>
          <tr>
            
          </tr>
        </tbody>
      </table>
    </div>
  );
}

export default App;

Any hints would be greatly appreciated.
Thanks in advance.

2

XMLPolyDataReader != XMLUnstructuredGridReader

This topic has been covered many time along with paths to solve the limitation of vtk.js.

3

Thank you for your reply. I apologize for asking something that has been repeatedly addressed.