Etc.End的博客

vtk.js是一个基于WebGL的开源3D可视化库，它可以在Web浏览器中呈现高质量的3D图形。vtk.js提供了一个易于使用的API，可以用于创建各种类型的3D可视化，包括科学、医学、工程和地球科学等领域。vtk.js支持多种数据格式，包括VTK、DICOM、STL等，可以轻松地将数据导入到可视化中。此外，vtk.js还支持交互式可视化，用户可以通过鼠标和键盘进行交互，探索和分析数据。

这篇文章本来不想写的，因为大家都会，最终还是决定写一下，目的是不想来看的小伙伴被搞得一头雾水，莫名奇妙的就出现很多代码，前后对不上。既然是专栏，那么就要有始有终。每一步的代码都能呈现出来，达到一个完整性。那么一个系统不管是成型的还是一个demo，最起码的就是看起来像那么回事。布局的话我采用上下结构，上面的话可以放一些logo，导航什么的。下面分为左右部分，左侧显示模型的一些信息，如果批量导入的话可以对指定模型进行处理。右侧就是我们的可视化区域。

vtk.js目前支持的格式有vtp、vti、skybox、obj、obz、stl、ply、gltf 、glb、x3d、3ds、fbx、dae、json、glyph等等。vtk.js还支持从JavaScript数组、Typed Arrays和ImageData对象中创建数据集。支持这么多格式是因为vtk.js本身就给我们提供了相应的Reader读取器去解析。但有的格式是不支持直接加载的，我们需要它的好兄弟ITK来协助。让我们的平台能支持更多更多的格式，比如（vtk、exo、ex2、mrc等等）

上一章节我在模型可视化区域加了一些图标，但是对应的功能都没有去开发，这期我们就来逐个去实现相应的功能。组件的话我分为tooltip和vuetoolbar，很好理解，就是上下两个工具。可视化区域右上侧的功能主要是针对模型的一个旋转操作。右下部分的工具主要是切换背景、截图、窗口分割。为什么要做这些功能，旋转的话可以快速达到我们要观察的角度， 比自己手动去拖拽更加的快和准确。截图和切换背景看个人需求。这些功能都比较的简单。下面我会给出每个功能实现用到的具体API和使用方法。

vtk.js考虑到我们会对按键组合的定义做更改，也是很贴心的提供了各种API，我们可以重置按键对应的事件，还可以去添加自定义按键组合，并且官网上面也提供了案例。

Vtk里面工具非常的齐全，但是相关的文档又少之又少，只能花大量时间去阅读源码。满反射曲面颜色是什么意思呢，Vtk可以使用漫反射曲面颜色来模拟光线在表面反射时的颜色。漫反射是一种光线与表面发生碰撞后，被散射到各个方向的现象，这种现象可以用来解释物体表面的颜色。漫反射曲面颜色通常被用于表示物体的表面颜色，特别是在三维渲染和可视化中。还有就是模型自己带有颜色参数。vtk可以通过获取这些参数。从而进行切换。

网格模型中的点代表空间的一个位置(一个图形的位置)，线代表连接两个点的线段(图形的边缘)，面代表由多个相邻线段围成的平面(图形的表面)，网格代表图形的结构和形状。我对于建模基本上是不懂的，据我了解点线面是平面构成的三要素，平面构成是视觉元素在二次元的平面上，按照美的视觉效果，力学的原理，进行编排和组合，它是以理性和逻辑推理来创造形象、研究形象与形象之间的排列的方法。是理性与感性相结合的产物。平面构成主要是运用点、线、面和律动组成结构严谨，富有极强的抽象性和形式感。市面上的三维建模软件，基本元素都是点线面。

vtk.js是一个基于WebGL的开源3D可视化库，它可以在Web浏览器中呈现高质量的3D图形。vtk.js提供了一个易于使用的API，可以用于创建各种类型的3D可视化，包括科学、医学、工程和地球科学等领域。vtk.js支持多种数据格式，包括VTK、DICOM、STL等，可以轻松地将数据导入到可视化中。此外，vtk.js还支持交互式可视化，用户可以通过鼠标和键盘进行交互，探索和分析数据。采用的vite4+pinia搭建的Vue3项目。

VTK（Visualization Toolkit）是一种用于三维计算机图形、图像处理以及可视化的软件系统。它广泛用于科学可视化的各种领域，包括医学影像、地理信息系统、计算机图形学等。VTK的数据模型使用一种称为数据集（DataSet）的抽象模型来表示三维图形和数据。数据集由数据对象（DataObject）组成，这些对象可以是几何数据（Geometry）或拓扑数据（Topology）。几何数据表示实际的空间位置和形状，而拓扑数据定义了几何数据之间的关系。