【vtk.js学习笔记(1)】vtk.js环境搭建
vtk(visualization toolkit)发布了全新的8.0版本,并一同发布了基于浏览器WebGL的可视化工具vtk.js。之前我参与的基于vtk的项目都是在Qt框架下使用C++编写,比较繁琐,开发效率较低。现在可以用JavaScript来做可视化的项目,开发效率较之前应该会有较大程度的提高。
1、下面使用vtk.js完成一个hello world程序
1 | <script type="text/javascript" src="https://unpkg.com/vtk.js"></script> |
首先引入vtk.js,然后与vtk类似,先导入椎体数据源,然后将数据传入mapper,再将actor与mapper绑定。之后vtk.js有一个全新的类vtkFullScreenRenderWindow,该类将在浏览器全屏显示窗口。从vtkFullScreenRenderWindow类获取render,将actor加入到render内,再次通过vtkFullScreenRenderWindow获取window,调用window的render()方法开始渲染。
非常简单!
2、使用webpack打包
node版本要求8.0+,npm版本5.0+,在项目文件夹下1
npm init
然后安装vtk.js及vtk所属Kitware基金会的开发套件kw-web-suite1
2npm install vtk.js --save
npm install kw-web-suite --save-dev
修改package.json1
2
3
4
5
6
7
8
9
10{
...
"scripts": {
"build": "webpack",
"build:release": "webpack -p",
"start": "webpack-dev-server --content-base ./dist",
"commit": "git cz",
"semantic-release": "semantic-release"
}
}
创建webpack.config.js如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28const path = require('path');
const webpack = require('webpack');
const vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.v2.rules;
const entry = path.join(__dirname, './src/index.js');
const sourcePath = path.join(__dirname, './src');
const outputPath = path.join(__dirname, './dist');
module.exports = {
mode: 'development',
entry,
output: {
path: outputPath,
filename: 'app.js'
},
module: {
rules: [
{ test: entry, loader: 'expose-loader?app' },
{ test: /\.html$/, loader: 'html-loader' },
].concat(vtkRules)
},
resolve: {
module: [
path.resolve(__dirname, 'node_modules'),
sourcePath
]
}
};
入口文件是src下的index.js,出口文件是dist文件夹下的app.js。
src文件夹下index.js如下1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18import vtkConseSource from 'vtk.js/Sources/Filters/Sources/ConeSource';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
const cone = vtkConseSource.newInstance();
const mapper = vtkMapper.newInstance();
const actor = vtkActor.newInstance();
mapper.setInputConnection(cone.getOutputPort());
actor.setMapper(mapper);
const fullRender = vtkFullScreenRenderWindow.newInstance();
const render = fullRender.getRenderer();
render.addActor(actor);
render.resetCamera();
const renderWindow = fullRender.getRenderWindow();
renderWindow.render();
注意这里引入模块的路径与1中脚本方式直接调用的路径类似,但最后的vtkConeSource、vtkMapper、vtkActor等需将vtk去掉。
index.html如下1
<script src="app.js"></script>
打包1
npm run build
报错:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
configuration.resolve has an unknown property ‘module’. These properties are valid:
object { alias?, aliasFields?, cachePredicate?, cacheWithContext?, descriptionFiles?, enforceExtension?, enforceModuleExtension?, extensions?, fileSystem?, mainFields?, mainFiles?, moduleExtensions?, modules?, plugins?, resolver?, symlinks?, concord?, unsafeCache?, useSyncFileSystemCalls? }
Options for the resolver
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vtk@1.0.0 build: webpack
npm ERR! Exit status 1
错误原因在于webpack.config.js文件没有配置对,最后一项modules错写为module,改正后重新生成,成功。
启动开发服务器1
npm start