从头开始一个vtk.js项目
初始化项目
mkdir my-vtkjs-app
cd my-vtkjs-app
npm init
安装 @kitware/vtk.js 依赖
npm install @kitware/vtk.js
对于这个例子，我们将使用webpack来构建我们的应用程序。
npm install -D webpack-cli webpack webpack-dev-server
项目脚手架
我们需要先处理一些工程脚手架。让我们首先创建一些目录。
mkdir dist src
在dist/中，我们将创建一个index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
此外，我们将添加一些脚本，使运行构建命令更容易。
"scripts": {
+ "build": "webpack --progress --mode=development",
+ "start": "webpack serve --progress --mode=development --static=dist",
"test": "echo \"Error: no test specified\" && exit 1"
}
在你的应用中使用vtk.js
将以下代码添加到src/index.js中
import '@kitware/vtk.js/Rendering/Profiles/Geometry';
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow';
import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor';
import vtkMapper from '@kitware/vtk.js/Rendering/Core/Mapper';
import vtkCalculator from '@kitware/vtk.js/Filters/General/Calculator';
import vtkConeSource from '@kitware/vtk.js/Filters/Sources/ConeSource';
import { AttributeTypes } from '@kitware/vtk.js/Common/DataModel/DataSetAttributes/Constants';
import { FieldDataTypes } from '@kitware/vtk.js/Common/DataModel/DataSet/Constants';
const controlPanel = `
<table>
<tr>
<td>
<select class="representations" style="width: 100%">
<option value="0">Points</option>
<option value="1">Wireframe</option>
<option value="2" selected>Surface</option>
</select>
</td>
</tr>
<tr>
<td>
<input class="resolution" type="range" min="4" max="80" value="6" />
</td>
</tr>
</table>
`;
// ----------------------------------------------------------------------------
// Standard rendering code setup
// ----------------------------------------------------------------------------
const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance();
const renderer = fullScreenRenderer.getRenderer();
const renderWindow = fullScreenRenderer.getRenderWindow();
// ----------------------------------------------------------------------------
// Example code
// ----------------------------------------------------------------------------
const coneSource = vtkConeSource.newInstance({ height: 1.0 });
const filter = vtkCalculator.newInstance();
filter.setInputConnection(coneSource.getOutputPort());
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);
renderer.addActor(actor);
renderer.resetCamera();
renderWindow.render();
// -----------------------------------------------------------
// UI control handling
// -----------------------------------------------------------
fullScreenRenderer.addController(controlPanel);
const representationSelector = document.querySelector('.representations');
const resolutionChange = document.querySelector('.resolution');
representationSelector.addEventListener('change', (e) => {
const newRepValue = Number(e.target.value);
actor.getProperty().setRepresentation(newRepValue);
renderWindow.render();
});
resolutionChange.addEventListener('input', (e) => {
const resolution = Number(e.target.value);
coneSource.setResolution(resolution);
renderWindow.render();
});
运行应用程序
添加源文件后，使用webpack开发服务器运行应用程序
npm run start
导航到http://localhost:8080，您应该有一个锥体的交互式3D可视化，类似于SimpleCone示例。
标签：从头开始,const,vtk,kitware,js,webpack,import From： https://www.cnblogs.com/ccxiaosong/p/17836432.html