vtk.js 实战之Axes

878 阅读1分钟

上文实现了3D模型的渲染,本章需要在这个基础上面实现坐标的标尺应用。

本章你将会学到以下知识:

  • vtkCubeAxesActor 这个类的说明
  • vtkCubeAxesActor 这个类的使用

vtkCubeAxesActor 这个类的说明

kitware.github.io/vtk-js/api/…

设置3D坐标的类,仔细看其代码 发现

编辑切换为居中

添加图片注释,不超过 140 字(可选)

需要先设置一个camera,获取了当前的activeCamera之后,我们要知道当前的立方体的Bounds,这样就可以绘制坐标了,而本身是一个Actor,所以应该还是需要放置在renderer里面。

在上一章的代码中先可以加入以下代码:

import vtkCubeAxesActor from "@kitware/vtk.js/Rendering/Core/CubeAxesActor";

const cubeAxesActor = vtkCubeAxesActor.newInstance();

const activeCamera = renderer.getActiveCamera();
  cubeAxesActor.setCamera(activeCamera);
  cubeAxesActor.setDataBounds(actor.getBounds());
  renderer.addActor(cubeAxesActor);

\

结果如下所示:

编辑切换为全宽

添加图片注释,不超过 140 字(可选)

但是这样发现网格线太多了,我们可以设置一些自定义的属性。

编辑切换为居中

添加图片注释,不超过 140 字(可选)

我们在源码里面找一些get和set属性(一般的有get肯定就有set方法相对应的),看到有个gridLines 先猜测是否是设置gridLines的这个属性的。

编辑切换为居中

添加图片注释,不超过 140 字(可选)

默认的gridLines 是个bool 值 估计是可以设置为true或者false的。加上下面这句试一试:

  cubeAxesActor.setGridLines(false);

这个时候效果如下所示:

编辑切换为全宽

添加图片注释,不超过 140 字(可选)

其他的属性都可以试一试,读者可以自己写一写。

\

下一篇将会讲解切片数据组件ResliceWidget的使用