【vtk.js学习笔记（1）】vtk.js环境搭建

最新推荐文章于 2024-08-10 07:42:51 发布

orangecsy

最新推荐文章于 2024-08-10 07:42:51 发布

阅读量1.3w

点赞数 4

本文链接：https://blog.csdn.net/orangecsy/article/details/79902443

版权

本文介绍了如何利用vtk.js进行WebGL可视化的基本步骤，包括环境搭建、编写简单的Hello World程序，以及使用webpack进行项目打包。在过程中，详细阐述了遇到的Webpack配置问题及其解决方案，最终成功在浏览器中展示椎体渲染效果。

摘要由CSDN通过智能技术生成

vtk（visualization toolkit）发布了全新的8.0版本，并一同发布了基于浏览器WebGL的可视化工具vtk.js。之前我参与的基于vtk的项目都是在Qt框架下使用C++编写，较为繁琐，开发效率较低。现在可以用JavaScript来做可视化的项目，开发效率较之前应该会有较大程度的提高。

1、下面使用vtk.js完成一个hello world程序

<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
    const cone = vtk.Filters.Sources.vtkConeSource.newInstance();
    const mapper = vtk.Rendering.Core.vtkMapper.newInstance();
    const actor = vtk.Rendering.Core.vtkActor.newInstance();
    mapper.setInputConnection(cone.getOutputPort());
    actor.setMapper(mapper);

    const fullRender = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
    const render = fullRender.getRenderer();
    render.addActor(actor);
    render.resetCamera();

    const renderWindow = fullRender.getRenderWindow();
    renderWindow.render()