vtk-js

由于需要在网页上展示网格或者BIM模型，考虑到性能的问题，使用了Kitware的VTK.js库，但是由于VTK.js的文档不是很完善，所以在使用的过程中遇到了很多问题，这里记录一下。

1. 集成到Angular中

Angular中使用了TypeScript，这也是选用Angular的原因。TypeScript提供了类型检查，可以在编译时发现错误，而不是在运行时。但是VTK.js是用JavaScript写的，所以需要将VTK.js转换成TypeScript。Kitware官方提供了**@kitware\vtk.js**。所以需要安装这个包。

npm install @kitware/vtk.js

2. 对于未定义的部分，需要增加声明文件

declare module 'vtk.js/Sources/Rendering/OpenGL/RenderWindow';

将其放在src\typings\vtk.d.ts中。

3. 在之前的版本中，上述可以方式可以解决问题。但是在最新的版本中，添加声明文件，但是还是会报错。所以干脆自己在**@kitware\vtk.js**中添加声明文件，然后重新编译。具体的做法为：

   1. 拉取vtk.js的源码

   git clone https://github.com/Kitware/vtk-js

   2. 添加必要的类型定义

   3. 编译

   npm run build

   4. 在vtk-js编译后的目录中运行npm link

   npm link

   5. 在项目中运行npm link @kitware/vtk.js

   npm link @kitware/vtk.js

   6. 在项目中运行npm install

   npm install

这个时候项目中使用的代码为修改过后的代码，如果缺少类型定义就按照上述方法添加。

另外，在使用vtk.js显示时，总是会感觉分辨率低。经过和官方的源代码对比后发现，官方的源代码中将canvs的width和height设置为了150%，而我在使用时没有设置，所以导致了分辨率低的问题。