javascript - VTK.js、 react 、JavaScript : Load VTK files

标签 javascript reactjs vtk.js

我已遵循介绍指南:https://kitware.github.io/vtk-js/docs/develop_requirement.html安装 vtk、node 和 git。

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

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'

我刚刚使用了以下代码:https://kitware.github.io/vtk-js/examples/PolyDataReader.html

此外,如果我转到上一个文件并深入到 ./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;

我在主页上使用它作为:

<LoadVTK/>

可能是什么问题?

最佳答案

我运行了您的示例,发现了两个问题:

  • dist 路径问题(已由@Jonathan Quiroz 解决)

  • 扩展 React.Component() 而不是 React.Component - 这导致可以构建代码,但无法在浏览器中正常运行。

不要忘记正确设置 webpack ( https://kitware.github.io/vtk-js/docs/intro_vtk_as_es6_dependency.html )

在这两个更新之后它应该可以工作 - 我已经测试过了。

关于javascript - VTK.js、 react 、JavaScript : Load VTK files,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48907794/

相关文章:

javascript - AJAX 状态 12030

javascript - Rails javascript 资源冲突

reactjs - 单击时如何切换 Material UI 图标

javascript - 将 POST 与 React Fetch 一起使用会返回空对象吗?

javascript - 可以在没有服务器端的情况下通过 paraviewweb 或 vtk.js 渲染 .pvd 文档/场景吗?

javascript - 如何使用 vtk.js 渲染 Float32Array 立方体?

javascript - 如何使用 Angular 自动聚焦在第一个输入字段

javascript - Angular Directive(指令)向所有字段显示消息,而不是向特定字段显示消息?

javascript - 使用 React 如何获取 const 中保存的选择下拉列表的值?