vite+vue3+vtkjs28版本显示2D序列图像

首先，你需要安装 `vtk.js` 的最新版本（目前是 `9.0.1`），因为它包含了对 Vue3 的支持。然后，你可以使用 `vtk.js` 提供的 `ImageViewer` 组件来显示 2D 序列图像。

下面是一个示例代码：

<template>
  <div>
    <vtk-viewer ref="viewer" :interactor="interactor" :renderer="renderer" :renderWindow="renderWindow" />
  </div>
</template>

<script>
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkImageData from 'vtk.js/Sources/Common/DataModel/ImageData';
import vtkImageMapper from 'vtk.js/Sources/Rendering/Core/ImageMapper';
import vtkImageViewer from 'vtk.js/Sources/Rendering/Core/ImageViewer';
import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';

export default {
  name: 'ImageViewer',
  components: {
    'vtk-viewer': vtkImageViewer,
  },
  data() {
    return {
      interactor: null,
      renderer: null,
      renderWindow: null,
    };
  },
  mounted() {
    const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
    this.interactor = fullScreenRenderer.getInteractor();
    this.renderer = fullScreenRenderer.getRenderer();
    this.renderWindow = fullScreenRenderer.getRenderWindow();

    const imageData = vtkImageData.newInstance();
    imageData.setDimensions(512, 512, 1);
    imageData.computeTransforms();
    const pixelValues = new Uint8Array(512 * 512);
    // TODO: set pixel values based on your image data

    const imageMapper = vtkImageMapper.newInstance();
    imageMapper.setInputData(imageData);

    const imageActor = fullScreenRenderer.getActor();
    imageActor.getProperty().setColorWindow(255);
    imageActor.getProperty().setColorLevel(127.5);
    imageActor.setMapper(imageMapper);

    const istyle = vtkInteractorStyleImage.newInstance();
    this.interactor.setInteractorStyle(istyle);

    this.$refs.viewer.setContainer(fullScreenRenderer.getContainer());
    this.$refs.viewer.setRenderWindow(fullScreenRenderer.getRenderWindow());
    this.$refs.viewer.addRenderer(fullScreenRenderer.getRenderer());
    this.$refs.viewer.addActor(imageActor);

    fullScreenRenderer.resize();
    fullScreenRenderer.resetCamera();
  },
};
</script>

在这个示例中，我们创建了一个 `vtkFullScreenRenderWindow`，然后使用 `vtkImageData` 创建了一个 512x512 的图像数据。你需要根据你的数据格式和需求来创建你自己的图像数据。

然后，我们创建了一个 `vtkImageMapper` 和一个 `vtkActor`，将它们添加到渲染器中。最后，我们将 `vtkImageViewer` 组件的渲染器、渲染窗口和交互器设置为我们创建的 `vtkFullScreenRenderWindow` 的渲染器、渲染窗口和交互器。

注意，因为 `vtkImageViewer` 组件是异步加载的，所以我们需要在 `mounted` 生命周期中等待组件加载完成后再进行渲染。

希望这可以帮助你开始在 Vue3 中使用 `vtk.js` 显示 2D 序列图像。