上文实现了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的使用