Vue 3 搭配 VTK.js 渲染无显示？官方3.x版本教程圆锥不渲染问题

1. 容器元素尺寸未正确设置 #

VTK.js 需要一个有明确宽高的 DOM 容器来渲染场景，如果容器没有设置尺寸，渲染内容会被压缩到0，自然看不到。

• 检查组件中 VTK 容器的样式，确保设置了 width 和 height，比如：

.vtk-container {
  width: 100%;
  height: 600px; /* 或其他固定/相对高度 */
}

• 不要依赖父元素的隐式尺寸，尤其是父元素未设置高度时，必须给容器显式指定高度。

2. Vue 3 生命周期钩子使用错误 #

VTK.js 需要在 DOM 元素挂载完成后才能初始化渲染器，若在 setup 中直接初始化，此时 DOM 还未创建，会导致渲染失败。

• 正确做法是在 onMounted 钩子中初始化 VTK 实例：

import { onMounted, ref } from 'vue';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';

export default {
  setup() {
    const vtkContainer = ref(null);
    let fullScreenRenderer = null;

    onMounted(() => {
      if (vtkContainer.value) {
        fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
          container: vtkContainer.value,
        });
        // 后续添加圆锥等模型的代码
      }
    });

    return { vtkContainer };
  },
};

3. VTK.js 实例未正确关联容器 #

按官方教程操作时，若遗漏将渲染窗口绑定到指定的 Vue 容器元素，会导致渲染到默认的隐藏容器里。

• 初始化 FullScreenRenderWindow 时，必须通过 container 参数传入 Vue 模板中的容器 ref：

<template>
  <div ref="vtkContainer" class="vtk-container"></div>
</template>

4. 渲染循环未启动或被中断 #

VTK.js 需要持续的渲染循环来更新画面，若渲染循环未正确启动，模型不会显示。

• 创建渲染器后，确保启动渲染循环：

const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
// 添加圆锥模型后调用
renderWindow.render();
// 若需动态更新，还要设置动画循环
renderWindow.startAnimation();

5. 依赖版本不兼容 #

Vue 3 和 VTK.js 部分版本可能存在兼容性问题，使用最新版 VTK.js 时要确保依赖安装正确。

• 建议安装稳定版的 VTK.js：

npm install @kitware/vtk.js@latest

• 避免混用不同版本的 VTK.js 相关包。

6. 相机位置或模型可见性问题 #

有时模型已渲染，但相机位置不对导致看不到。

• 添加模型后，调用 renderer.resetCamera() 让相机自动调整到合适位置：

const coneSource = vtkConeSource.newInstance();
const mapper = vtkMapper.newInstance({ inputConnection: coneSource.getOutputPort() });
const actor = vtkActor.newInstance({ mapper });

renderer.addActor(actor);
renderer.resetCamera(); // 关键：重置相机位置
renderWindow.render();

内容的提问来源于stack exchange，提问作者Dave Mackey