简单的创建一个vtkjs项目

mkdir my-vtkjs-app（mkdir 为window创建文件夹用）

cd my-vtkjs-app

npm init

npm install vtk.js --save
npm install kw-web-suite --save-dev

npm install -D webpack-cli webpack webpack-dev-server css-loader postcss-loader

项目中创建dist文件夹和src文件夹

mkdir dist src

dist下创建index.html

./dist/index.html

其中main.js为pack.json里面配置build打包后在dist文件夹下生成的

pack.json下配置

{
  "name": "my-vtkjs-app",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "build": "webpack --progress --mode=development",
    "start": "webpack serve --progress --mode=development --static=dist",
    "test": "echo \"Error: no test specified\" && exit 1"  
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
     "kw-web-suite": "^11.1.0",
     "vtk.js": "^24.5.6"
  }

}

src文件夹下创建index.js

import 'vtk.js/Sources/favicon'; // Load the rendering pieces we want to use (for both WebGL and WebGPU) import 'vtk.js/Sources/Rendering/Profiles/Geometry'; import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor'; import vtkCalculator from 'vtk.js/Sources/Filters/General/Calculator'; import vtkConeSource from 'vtk.js/Sources/Filters/Sources/ConeSource'; import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow'; import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper'; import { AttributeTypes } from 'vtk.js/Sources/Common/DataModel/DataSetAttributes/Constants'; import { FieldDataTypes } from 'vtk.js/Sources/Common/DataModel/DataSet/Constants'; import vtkFPSMonitor from 'vtk.js/Sources/Interaction/UI/FPSMonitor'; // ---------------------------------------------------------------------------- // Standard rendering code setup // ---------------------------------------------------------------------------- const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({ background: [0, 0, 0], }); const renderer = fullScreenRenderer.getRenderer(); const renderWindow = fullScreenRenderer.getRenderWindow(); const fpsMonitor = vtkFPSMonitor.newInstance(); const fpsElm = fpsMonitor.getFpsMonitorContainer(); fpsElm.style.position = 'absolute'; fpsElm.style.left = '10px'; fpsElm.style.bottom = '10px'; fpsElm.style.background = 'rgba(255,255,255,0.5)'; fpsElm.style.borderRadius = '5px'; fpsMonitor.setContainer(document.querySelector('body')); fpsMonitor.setRenderWindow(renderWindow); fullScreenRenderer.setResizeCallback(fpsMonitor.update); // ---------------------------------------------------------------------------- // Example code // ---------------------------------------------------------------------------- // create a filter on the fly, sort of cool, this is a random scalars // filter we create inline, for a simple cone you would not need // this // ---------------------------------------------------------------------------- const coneSource = vtkConeSource.newInstance({ center: [0, 500000, 0], height: 1.0, }); const filter = vtkCalculator.newInstance(); filter.setInputConnection(coneSource.getOutputPort()); // filter.setFormulaSimple(FieldDataTypes.CELL, [], 'random', () => Math.random()); filter.setFormula({ getArrays: (inputDataSets) => ({ input: [], output: [ { location: FieldDataTypes.CELL, name: 'Random', dataType: 'Float32Array', attribute: AttributeTypes.SCALARS, }, ], }), evaluate: (arraysIn, arraysOut) => { const [scalars] = arraysOut.map((d) => d.getData()); for (let i = 0; i < scalars.length; i++) { scalars[i] = Math.random(); } }, }); const mapper = vtkMapper.newInstance(); mapper.setInputConnection(filter.getOutputPort()); const actor = vtkActor.newInstance(); actor.setMapper(mapper); actor.setPosition(500000.0, 0.0, 0.0); coneSource.setResolution(15); renderer.addActor(actor); renderer.resetCamera(); renderWindow.render(); fpsMonitor.update(); global.source = coneSource; global.mapper = mapper; global.actor = actor; global.renderer = renderer; global.renderWindow = renderWindow;

然后npm run build

再npm start 会得到如下报错信息

index.js:23 Uncaught ReferenceError: regeneratorRuntime is not defined

由于es6解析的原故我们需要在index.html中加入

加入后的index.html

最后执行npm start即可启动vtk.js项目

执行结果

一个3d图

附带webpack.config.js

var path = require('path');
var webpack = require('webpack');
var vtkRules = require('vtk.js/Utilities/config/dependency.js').webpack.core.rules;

// 載入 *.css 與 *.module.css 檔案
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: 'main.js',
  },
  module: {
    rules: [
        { test: /.html$/, loader: 'html-loader' },
    ].concat(vtkRules, cssRules),
  },
  resolve: {
    modules: [
      path.resolve(__dirname, 'node_modules'),
      sourcePath,
    ],
  },
};