使用vtk.js实现在线查看vtp文件

最新推荐文章于 2024-05-15 09:42:05 发布

空中湖

最新推荐文章于 2024-05-15 09:42:05 发布

阅读量1.4k

点赞数

分类专栏： js 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/kongzhonghu/article/details/126577832

版权

js 专栏收录该内容

49 篇文章 4 订阅

订阅专栏

使用vtk.js实现在线查看vtp文件，单页面html瞬间加载，实现vtp文件的在线浏览

代码目录结构

最终的展示效果如下

基本代码：

<!DOCTYPE html>
<html>
<body>

<script type="text/javascript">

    var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
    var actor = vtk.Rendering.Core.vtkActor.newInstance();
    var mapper = vtk.Rendering.Core.vtkMapper.newInstance();

   
    actor.setMapper(mapper);
    mapper.setInputConnection(vtpReader.getOutputPort());

    function addActor() {
        fullScreenRenderer.getRenderer().addActor(actor);
        fullScreenRenderer.getRenderer().resetCamera();
        fullScreenRenderer.getRenderWindow().render();
    }


    vtpReader.setUrl("./mesh.vtp").then(addActor);
    
</script>
</body>
</html>

查看的时候应该放到nginx或者tomcat服务器下面使用访问index.html，不然无法访问目录下的资源。

DEMO链接