简单的创建一个vtkjs项目mkdir my-vtkjs-app（mkdir 为window创建文件夹用） cd my-

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>


<script type="text/javascript" src="main.js"></script>
</body>
</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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>

</head>
<body>


<script type="text/javascript" src="main.js"></script>
</body>
</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;

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,
    ],
  },
};