关于vtk.js使用环境的搭建

最新推荐文章于 2024-02-20 16:38:47 发布

J.CH.

最新推荐文章于 2024-02-20 16:38:47 发布

阅读量1.3k

点赞数 5

分类专栏： vtk-learn 文章标签： vtk js

本文链接：https://blog.csdn.net/qq_48146525/article/details/118492430

版权

vtk-learn 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做调试看了很多的demo，调试了半天，也不行，决着还是再看看github上的doc叭，全是英文看着属实难受翻译又不太行，而且github我用edge访问偶尔可以偶尔又不行的太麻烦了，连接：https://kitware.github.io/vtk-js/docs/vtk_vanilla.html

01- 目录创建与初始化

在这里插入图片描述

mkdir my-vtkjs-app
cd my-vtkjs-app
> npm init

一直回车就是辽，
在这里插入图片描述
当看到这个，回车之后，

你所在目录下，就会出现一个json 文件，package，和命令窗口里的信息一致，然后继续下一步

02- 下载vtk.js 及相关依赖

> npm install @kitware/vtk.js
> npm install -D webpack-cli webpack webpack-dev-server

在这里插入图片描述
成功之后：
路径下面：

03- package.json 信息的修改

在这里插入图片描述

    "build": "webpack --progress --mode=development",
    "start": "webpack serve --progress --mode=development --content-base=dist",

04- 两个路径的创建，相关源码的导入

src路径&dist路径：
在这里插入图片描述
可以直接再命令行创建：

加入demo测试：

src路径下：

在这里插入图片描述

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();
});

dist 路径下：

在这里插入图片描述

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script src="./main.js"></script>
  </body>
</html>

05- build & start

Running the app
After adding the source file, run the app with the webpack dev server.

> npm run start

Navigate to http://localhost:8080, and you should have an interactive 3D visualization of a cone, similar to the SimpleCone example.
在这里插入图片描述

也可以先build，
在这里插入图片描述
此时，dist路径下，就会出现main. js的文件：

> npm start

J.CH.

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
关于vtk.js使用环境的搭建

做调试看了很多的demo，调试了半天，也不行，决着还是再看看github上的doc叭，全是英文看着属实难受翻译又不太行，而且github我用edge访问偶尔可以偶尔又不行的太麻烦了，连接：https://kitware.github.io/vtk-js/docs/vtk_vanilla.html01- 目录创建与初始化mkdir my-vtkjs-appcd my-vtkjs-app> npm init一直回车就是辽，当看到这个，回车之后，你所在目录下，就会出现一个json 文件
复制链接

扫一扫