vtkjs渲染一个切片体渲染的过程

vtkjs数据流的一般情况是

source——filter——mapper——actor——render——renderwindow

资源——筛选资源（数据处理，一个或多个输入，但只有一个输出） ——映射筛选后的资源——可视化映射筛选后的资源——render——renderwindow

首先引入对应api

import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkHttpDataSetReader from 'vtk.js/Sources/IO/Core/HttpDataSetReader';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageSlice from 'vtk.js/Sources/Rendering/Core/ImageSlice';

定义窗口信息

const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
    background: [0, 0, 0, 255],
});
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();

创建一个I切片

const imageActorI = vtkImageSlice.newInstance();

把可视化I切片加到渲染里面

actor——render

renderer.addActor(imageActorI);

把数据映射到可视化图中，注意这里需要引入

import 'vtk.js/Sources/Rendering/Profiles/Volume';
import 'vtk.js/Sources/IO/Core/DataAccessHelper/HtmlDataAccessHelper';
import 'vtk.js/Sources/IO/Core/DataAccessHelper/HttpDataAccessHelper';
import 'vtk.js/Sources/IO/Core/DataAccessHelper/JSZipDataAccessHelper';

对数据进行转换解析

const reader = vtkHttpDataSetReader.newInstance({
    fetchGzip: true,
});
reader
    .setUrl(`/data/headsq.vti`, { loadData: true })
    .then(() => {
        const data = reader.getOutputData();
        //通过vtkImageMapper把数据映射到图片映射中
        const imageMapperI = vtkImageMapper.newInstance();
        imageMapperI.setInputData(data);
        imageMapperI.setISlice(30);
        // mapper——actor
        imageActorI.setMapper(imageMapperI);

        renderer.resetCamera();
        renderWindow.render();
    })

最终我们到到一个如下截图