【VTK】vtkjs编译

1、下载vtkjs-master.zip

2、package.json分析

复制代码
    "size": "size-limit --why --config ./webpack.config.js",
    "validate": "prettier --config ./prettier.config.js --list-different \"Sources/**/*.js\" \"Examples/**/*.js\"",
    "reformat": "prettier --config ./prettier.config.js --write \"Sources/**/*.js\" \"Examples/**/*.js\"",
    "reformat-only": "prettier --single-quote --trailing-comma es5 --print-width 80 --arrow-parens always --write",
    "doc": "kw-doc -c ./Documentation/config.js",
    "doc:www": "npm t -- --single-run && kw-doc -c ./Documentation/config.js -s",
    "doc:publish": "kw-doc -c ./Documentation/config.js -mp",
    "example": "node ./Utilities/ExampleRunner/example-runner-cli.js -c ./Documentation/config.js",
    "build": "webpack-dev-server --config webpack.dev.js",
    "build:release": "webpack --config webpack.prod.js --progress --hide-modules",
    "test": "karma start ./karma.conf.js",
    "test:travis": "karma start ./karma.conf.js --browsers ChromeHeadlessNoSandbox --single-run",
    "test:debug": "karma start ./karma.conf.js --no-single-run",
    "test:firefox": "karma start ./karma.conf.js --browsers Firefox",
    "test:firefox-debug": "karma start ./karma.conf.js --browsers Firefox --no-single-run",
    "commit": "git cz",
    "semantic-release": "semantic-release"
复制代码

3、文件结构分析

 

4、编译

npm run build:release

 

 

 

5、测试vtk.js

打开dist目录

 

双击index.html,浏览器出现

 

6、代码分析

复制代码
<!DOCTYPE html>
<html>

<head>
  <title>vtk.js</title>
</head>

<body>
  <script type="text/javascript" src="https://unpkg.com/@babel/polyfill@7.0.0/dist/polyfill.js"></script>
  <script type="text/javascript" src="vtk.js"></script>
  <script type="text/javascript">
    var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
    var actor = vtk.Rendering.Core.vtkActor.newInstance();
    var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
    var cone = vtk.Filters.Sources.vtkConeSource.newInstance();

    actor.setMapper(mapper);
    mapper.setInputConnection(cone.getOutputPort());

    var renderer = fullScreenRenderer.getRenderer();
    renderer.addActor(actor);
    renderer.resetCamera();

    var renderWindow = fullScreenRenderer.getRenderWindow();
    renderWindow.render();

  </script>
</body>

</html>
复制代码

 

posted @   咸鱼翻身  阅读(2169)  评论(0编辑  收藏  举报
编辑推荐:
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天:
2019-02-27 【PHP】xampp配置多个监听端口和不同的网站目录(转)
点击右上角即可分享
微信分享提示