VTK.js，React，JavaScript：加载VTK文件

我遵循了介绍指南：安装vtk、node和git

我一直在尝试集成到React应用程序中，它输出：

未能编译 ./node_modules/vtk.js/Sources/Rendering/OpenGL/Texture/index.js 1126:25-47在“/ComputeGradients.worker”中找不到“导出”默认值（导入为“ComputeGradientsWorker”）

我只是在以下方面使用了代码：

此外，如果我转到上一个文件并深入到

/ComputedGradients.worker

，我可以很好地导航到

ComputeGradients.worker.js

执行应用程序是否需要其他要求？我使用的是节点服务器

此外，我还将代码编写为React代码：

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;

从“React”导入React；
从“vtk.js/Sources/Rendering/Core/Actor”导入vtkActor；
从“vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow/index”导入vtkFullScreenRenderWindow；
从“vtk.js/Sources/Rendering/Core/Mapper”导入vtkMapper；
从“vtk.js/Sources/IO/Legacy/PolyDataReader”导入vtkPolyDataReader；
类LoadVTK扩展了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（）；
setUrl（`C:\Users\YoneEPC\WebstormProjects\prototipo\src\components\animals\cabezasegmentado02.vtk`）。然后（（）=>{
const polydata=reader.getOutputData（0）；
const mapper=vtkMapper.newInstance（）；
const actor=vtkActor.newInstance（）；
actor.setMapper（mapper）；
mapper.setInputData（polydata）；
addActor（actor）；
重置摄像头（）；
render（）；
});
返回(
);
}
}
导出默认LoadVTK；

我在主页上使用它作为：

<LoadVTK/>

---

可能是什么问题？

您必须将文件放入服务器，例如，我正在使用webpack运行，文件位于文件夹dist中： dist/cabezasegmentadoo2.vtk

当您调用该文件时：

---

reader.setUrl（“cabezasegmentadoo2.vtk”）

我运行了您的示例，发现了两个问题：

• dist路径问题（已由@Jonathan Quiroz解决）

• 扩展React.Component（）而不是React.Component-这导致代码可以生成，但不能在浏览器中正常运行

别忘了正确设置网页包（）

在这两次更新之后，它应该可以工作了——我已经测试过了