教程- VTK.js的基本介绍
VTK.js的核心是标准可视化工具包(VTK)库的JavaScript移植，这是一个c++库，旨在促进数据可视化，在此基础上构建了科学可视化应用程序Paraview。VTK.js没有使用OpenGL，而是利用WebGL，主要关注几何和体渲染。因此，它为不同类型的3D对象提供了大量的读取器。OBJ， . stl， . vtk等)。
在本教程中，我们将构建一个基本的VTK.js应用程序，并学习VTK渲染过程的一些基础知识。VTK库(尤其是它最初的c++实现)是一个巨大而强大的资源，如果你对它感兴趣，我强烈建议你查看VTK用户指南和VTK教科书以获得更多信息。
注意:本教程基于VTK.js应用程序示例。最初的教程没有太多的解释，所以我在这里更深入地解释了web开发和渲染过程的每个部分。
开始
首先，确保你的计算机上已经安装了node .js/npm(你可以通过在终端上运行node -v或npm -v来确认它们是否已经安装)。在为项目下载所需的JavaScript包时，这是必要的。
然后，在你希望项目基于的目录中，创建一个名为MyWebProject的目录，并将其初始化为一个带有包的npm存储库。json文件:
mkdir MyWebProject
cd MyWebProject
npm init
The package.json文件为你的项目指定了各种控件和选项。例如，包。json包含快捷“脚本”，你可以从你的终端运行，如“test”，当你从你的终端运行“npm test”时，将运行“echo \”错误:没有测试指定\“&& exit 1”。包。Json还跟踪项目依赖项及其版本。
说到依赖项，我们现在可以安装我们的两个依赖项:
npm install vtk.js --save
npm install kw-web-suite --save-dev
这些命令将这些库安装到项目的node_modules目录中，这是一个包含所有依赖项的方便文件夹。
现在，在项目的根目录中创建一个名为webpack.config.js的文件，并复制并粘贴以下代码:
var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;
// Optional if you want to load *.css and *.module.css files
// var cssRules = require('vtk.js/Utilities/config/dependency.js').webpack.css.rules;
var entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
entry,
output: {
path: outputPath,
filename: 'MyWebApp.js',
},
module: {
rules: [
{ test: /\.html$/, loader: 'html-loader' },
].concat(vtkRules),
},
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
sourcePath,
],
},
};
Webpack是一个用于web开发的模块捆绑器。它的功能超出了本教程的范围，但从本质上讲，这个配置文件为如何转译JavaScript文件和依赖项设置了某些选项，这样所有的JavaScript类和功能都可以压缩到一个文件中，以便在web浏览器中使用。欲了解更多信息，请访问https://webpack.js.org/。
In package.json,在“scripts”对象下添加以下脚本:
{
[...],
"scripts": {
"build": "webpack --progress --colors --mode development",
"build:release": "webpack --progress --colors --mode production",
"start": "webpack-dev-server --content-base ./dist",
"commit": "git cz",
"semantic-release": "semantic-release"
}
}
现在我们已经准备好构建我们的VTK.js应用程序了!
应用程序
在根目录下创建两个文件夹:./src和./dist。在dist/中，创建一个名为index.html的文件，并将以下代码复制到其中:
这是一个HTML文件，最终经过转译、捆绑的JS代码将被呈现到这个文件中。如果你有敏锐的眼光，你可能已经注意到在webpack.config.js中，我们应用程序的输出捆绑文件叫做MyWebApp.js，位于dist文件夹中。该文件随后由