vite+vue3+vtkjs28版本加载stl模型并且显示四视图(X,Y,Z2D图像和一个3D图片)

你可以使用 `vtk.js` 提供的 `STLReader` 和 `Actor` 来加载和显示 STL 模型。同时，你可以使用 `vtk.js` 中的 `Renderer` 和 `RenderWindow` 创建四个视图，分别显示 X、Y、Z 三个方向的 2D 图像和一个 3D 图像。下面是一个示例代码：

<template>
  <div class="vtk-container">
    <!-- X-Y 2D view -->
    <div class="vtk-2d-view">
      <vtk-viewer ref="viewerXY" :interactor="interactorXY" :renderer="rendererXY" :renderWindow="renderWindowXY" />
    </div>
    <!-- X-Z 2D view -->
    <div class="vtk-2d-view">
      <vtk-viewer ref="viewerXZ" :interactor="interactorXZ" :renderer="rendererXZ" :renderWindow="renderWindowXZ" />
    </div>
    <!-- Y-Z 2D view -->
    <div class="vtk-2d-view">
      <vtk-viewer ref="viewerYZ" :interactor="interactorYZ" :renderer="rendererYZ" :renderWindow="renderWindowYZ" />
    </div>
    <!-- 3D view -->
    <div class="vtk-3d-view">
      <vtk-viewer ref="viewer3D" :interactor="interactor3D" :renderer="renderer3D" :renderWindow="renderWindow3D" />
    </div>
  </div>
</template>

<script>
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkRenderer from 'vtk.js/Sources/Rendering/Core/Renderer';
import vtkRenderWindow from 'vtk.js/Sources/Rendering/Core/RenderWindow';
import vtkRenderWindowInteractor from 'vtk.js/Sources/Rendering/Core/RenderWindowInteractor';
import vtkInteractorStyleImage from 'vtk.js/Sources/Interaction/Style/InteractorStyleImage';

export default {
  name: 'STLViewer',
  components: {
    'vtk-viewer': vtkFullScreenRenderWindow,
  },
  data() {
    return {
      interactorXY: null,
      rendererXY: null,
      renderWindowXY: null,
      interactorXZ: null,
      rendererXZ: null,
      renderWindowXZ: null,
      interactorYZ: null,
      rendererYZ: null,
      renderWindowYZ: null,
      interactor3D: null,
      renderer3D: null,
      renderWindow3D: null,
    };
  },
  mounted() {
    // Create 4 renderers and render windows
    const fullScreenRendererXY = vtkFullScreenRenderWindow.newInstance({ rootContainer: this.$refs.viewerXY.$el });
    this.interactorXY = fullScreenRendererXY.getInteractor();
    this.rendererXY = fullScreenRendererXY.getRenderer();
    this.renderWindowXY = fullScreenRendererXY.getRenderWindow();

    const fullScreenRendererXZ = vtkFullScreenRenderWindow.newInstance({ rootContainer: this.$refs.viewerXZ.$el });
    this.interactorXZ = fullScreenRendererXZ.getInteractor();
    this.rendererXZ = fullScreenRendererXZ.getRenderer();
    this.renderWindowXZ = fullScreenRendererXZ.getRenderWindow();

    const fullScreenRendererYZ = vtkFullScreenRenderWindow.newInstance({ rootContainer: this.$refs.viewerYZ.$el });
    this.interactorYZ = fullScreenRendererYZ.getInteractor();
    this.rendererYZ = fullScreenRendererYZ.getRenderer();
    this.renderWindowYZ = fullScreenRendererYZ.getRenderWindow();

    const fullScreenRenderer3D = vtkFullScreenRenderWindow.newInstance({ rootContainer: this.$refs.viewer3D.$el });
    this.interactor3D = fullScreenRenderer3D.getInteractor();
    this.renderer3D = fullScreenRenderer3D.getRenderer();
    this.renderWindow3D = fullScreenRenderer3D.getRenderWindow();

    // Create STL reader and mapper
    const stlReader = vtkSTLReader.newInstance();
    stlReader.setUrl('stl-model.stl');

    const mapper = vtkMapper.newInstance();
    mapper.setInputConnection(stlReader.getOutputPort());

    // Create 4 actors
    const actorXY = vtkActor.newInstance();
    actorXY.setMapper(mapper);
    actorXY.setPosition(0, 0, 0);
    actorXY.setOrientation(0, 0, 0);

    const actorXZ = vtkActor.newInstance();
    actorXZ.setMapper(mapper);
    actorXZ.setPosition(0, 0, 0);
    actorXZ.setOrientation(-90, 0, 0);

    const actorYZ = vtkActor.newInstance();
    actorYZ.setMapper(mapper);
    actorYZ.setPosition(0, 0, 0);
    actorYZ.setOrientation(0, 0, 90);

    const actor3D = vtkActor.newInstance();
    actor3D.setMapper(mapper);
    actor3D.setPosition(0, 0, 0);
    actor3D.setOrientation(0, 0, 0);

    // Add actors to renderers
    this.rendererXY.addActor(actorXY);
    this.rendererXZ.addActor(actorXZ);
    this.rendererYZ.addActor(actorYZ);
    this.renderer3D.addActor(actor3D);

    // Set interactor styles
    const istyleXY = vtkInteractorStyleImage.newInstance();
    this.interactorXY.setInteractorStyle(istyleXY);

    const istyleXZ = vtkInteractorStyleImage.newInstance();
    this.interactorXZ.setInteractorStyle(istyleXZ);

    const istyleYZ = vtkInteractorStyleImage.newInstance();
    this.interactorYZ.setInteractorStyle(istyleYZ);

    // Set camera positions
    fullScreenRendererXY.resetCamera();
    fullScreenRendererXZ.resetCamera();
    fullScreenRendererYZ.resetCamera();
    fullScreenRenderer3D.resetCamera();

    fullScreenRendererXY.getCamera().setParallelProjection(true);
    fullScreenRendererXZ.getCamera().setParallelProjection(true);
    fullScreenRendererYZ.getCamera().setParallelProjection(true);

    this.renderer3D.getActiveCamera().setParallelProjection(true);
  },
};
</script>

<style>
.vtk-container {
  display: flex;
  flex-wrap: wrap;
}

.vtk-2d-view {
  flex: 1 0 50%;
  height: 200px;
}

.vtk-3d-view {
  flex: 1 0 100%;
  height: 400px;
}
</style>

在这个示例中，我们创建了四个渲染器和渲染窗口，分别用来显示 X、Y、Z 三个方向的 2D 图像和一个 3D 图像。我们使用 `vtkFullScreenRenderWindow` 来创建全屏渲染窗口，并将它们设置为每个视图的根容器。

然后，我们使用 `vtkSTLReader` 和 `vtkMapper` 创建一个 `vtkActor`，将它们添加到每个渲染器中。我们还设置了每个 `vtkActor` 的位置和朝向，以便正确显示在不同视图中。

最后，我们将每个渲染器的相机设置为平行投影，并使用 `fullScreenRenderer.resetCamera()` 将相机设置为默认位置。这样可以确保所有视图中的模型大小和位置一致。

希望这可以帮助你开始在 Vue3 中使用 `vtk.js` 加载和显示 STL 模型，并创建四个视图显示不同方向的 2D 图像和一个 3D 图像。