3

I have followed the introduction guide: https://kitware.github.io/vtk-js/docs/develop_requirement.html to install vtk, node and git.

I have been trying to integrate into a React aplication, and it outputs:

Failed to compile ./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js 1126:25-47 "export 'default' (imported as 'ComputeGradientsWorker') was not found in './ComputeGradients.worker'

I just have used the code in: https://kitware.github.io/vtk-js/examples/PolyDataReader.html

In addition if I go to the previous file and deep into ./ComputedGradients.worker, I navigate well to ComputeGradients.worker.js.

Do I need other requirement to execute the aplication? I am using a node server.

In addition I have written the code as React code:

import React from 'react';


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

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(`C:\Users\YonePC\WebstormProjects\prototipo\src\components\animals\cabezasegmentado02.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;

And I have used it from the main page as:

<LoadVTK/>

What could be the problem?

DJDaveMark
  • 2,669
  • 23
  • 35
Yone
  • 2,064
  • 5
  • 25
  • 56

2 Answers2

3

I had run your example and found two issues:

  • problem with dist path (already solved by @Jonathan Quiroz)

  • extends React.Component() instead of React.Component - which causes that code can be built, but can't be run properly in browser.

Don't forget to setup webpack properly (https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html)

After these two updates it should work - I have already tested it.

Andrzej Marciniak
  • 199
  • 2
  • 12
1

you have to put the file in the server, for example i am running with webpack and the file is inside the folder dist: dist/cabezasegmentado02.vtk

And when you call the file: reader.setUrl("cabezasegmentado02.vtk")

Jonathan Quiroz
  • 11
  • 1