简单的创建一个vtkjs项目

小江江12

已于 2022-05-22 12:22:32 修改

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 前端配置文章标签： javascript 开发语言 ecmascript

于 2022-01-05 14:52:49 首次发布

本文链接：https://blog.youkuaiyun.com/qq_39966730/article/details/122323602

js 同时被 3 个专栏收录

68 篇文章

订阅专栏

前端

61 篇文章

订阅专栏

配置

3 篇文章

订阅专栏

本文详细介绍了如何利用VTK.js库创建一个3D图形项目，包括初始化项目、安装依赖、配置webpack、编写源代码以及解决`regeneratorRuntime is not defined`的错误。通过引入`@babel/polyfill`解决了ES6语法支持问题，并展示了最终的运行结果。此外，还提供了webpack.config.js配置文件内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;

// 載入 *.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,
    ],
  },
};