Loading the VTK file

Web
,
1

I wrote the following code to be able to load the VTK file, but the page is white and the geometry is not visible.
Also I get this message in the console:“VTK container ref is not defined.”

import React, { useEffect, useRef, useState } from 'react';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';

function VTKViewer() {
    const vtkContainerRef = useRef(null);
    const [isMounted, setIsMounted] = useState(false);

    useEffect(() => {
        if (!vtkContainerRef.current) {
            console.warn('VTK container ref is not defined.');
            return;
        }

        setIsMounted(true);

        const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
            rootContainer: vtkContainerRef.current,
            containerStyle: { height: '100%', width: '100%' },
        });

        const renderer = fullScreenRenderer.getRenderer();
        const renderWindow = fullScreenRenderer.getRenderWindow();

        const actor = vtkActor.newInstance();
        const mapper = vtkMapper.newInstance();
        actor.setMapper(mapper);

        const reader = vtkHttpDataSetReader.newInstance({ fetchGzip: true });
        mapper.setInputConnection(reader.getOutputPort());

        reader.setUrl('/home/sample/test.vtk').then(() => {
            renderer.addActor(actor);
            renderer.resetCamera();
            renderWindow.render();
        });

        return () => {
            fullScreenRenderer.delete();
        };
    }, []);

    return isMounted ? <div ref={vtkContainerRef} style={{ width: '100%', height: '100%' }} /> : null;
}

export default VTKViewer;
2

Do not forget to load a profile file

3

Thanks for your response. I didn’t get your point. Can you explain more?

4

Please import the Geometry profile:

5

You should add vtkContainerRef to the useEffect dependecies because what you are doing is running the useEffect for the first render and it will not trigger again what it’s inside I hope that could solve your problem

useEffect(()=>{ 
//... 
//your code 
//..
}, [vtkContainerRef])

[EDITTED]
and try to install the kitware package “@kitware/vtk.js”: “^29.1.3”
your import should be something like that
also add the geometry as @finetjul said

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 vtkHttpDataSetReader from "@kitware/vtk.js/IO/Core/HttpDataSetReader";
import vtkFullScreenRenderWindow from "@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow";

that’s works for me I’m using react to