Learning vtkjs之Calculator

过滤器 公式计算器 Calculator

介绍

The Calculator filter is a fast way to add derived data arrays to a

dataset. These arrays can be defined over points, cells, or just field

data that is "uniform" across the dataset (i.e., constant over all of

space). Values in the array(s) you create are specified in terms of

existing arrays via a function you provide.

The Calculator filter is similar in spirit to VTK's array calculator,

so it should be familiar to VTK users but the syntax takes advantage

of JavaScript's flexibility.

chatGLM 翻译一下

计算器过滤器是一种快速向数据集中添加派生数据数组的方法。 这些数组可以定义为点、单元格,或只是数据集中的"统一"场数据(即,在整个空间中是常数)。 您创建的数组中的值是通过您提供的函数以现有数组为条件来指定的。

计算器过滤器在精神上类似于 VTK 的数组计算器,因此对 VTK 用户来说应该很熟悉,但其语法利用了 JavaScript 的灵活性。

用法

其实官方给的例子真的坑好多啊,比如interpolateScalarsBeforeMapping: false,才可以插值,useLookupTableScalarRange: false,才可以表示使用lookuptable,用起来很疑惑,你不看源码就不知道什么情况,它自己的例子也报错,运行不起来,最后需要自己debug一下

官方例子给的是setFormulaSimple方式,比较方便

核心代码

js 复制代码
// 创建一个计算器的过滤器
const simpleFilter = vtkCalculator.newInstance();
    simpleFilter.setFormulaSimple(
      FieldDataTypes.POINT, // Generate an output array defined over points.
      [], // We don't request any point-data arrays because point coordinates are made available by default.
      "z", // Name the output array "z"
      (x) => (x[0] - 0.5) * (x[0] - 0.5) + (x[1] - 0.5) * (x[1] - 0.5) + 0.125
    ); // Our formula for z
// 利用的是scalar来修改变形
    const warpScalar = vtkWarpScalar.newInstance();
    const warpMapper = vtkMapper.newInstance({
      interpolateScalarsBeforeMapping: false,
      useLookupTableScalarRange: false,
      lookupTable,
    });
    const warpActor = vtkActor.newInstance();
    // warpActor.getProperty().setEdgeVisibility(true);

    // The generated 'z' array will become the default scalars, so the plane mapper will color by 'z':
    // 数据源是来自这个平面plane
    simpleFilter.setInputConnection(planeSource.getOutputPort());

    // We will also generate a surface whose points are displaced from the plane by 'z':
    warpScalar.setInputConnection(simpleFilter.getOutputPort());
    // 设置需要对应处理的数组的key
    warpScalar.setInputArrayToProcess(0, "z", "PointData", "Scalars");


    warpMapper.setInputConnection(warpScalar.getOutputPort());
    warpActor.setMapper(warpMapper);

代码效果

一个公式效果

另外一个公式效果

这个还是挺好用的,用来按照一定规则过滤数组,这部分核心逻辑可以抽离出来

全部代码都放到github上了
新坑_Learning vtkjs_git地址

关注我,我持续更新vtkjs的example学习案例

也欢迎各位给我提意见,技术交流~

大鸿

WeChat : HugeYen

WeChat Public Account : BIM树洞

做一个静谧的树洞君

用建筑的语言描述IT事物;

用IT的思维解决建筑问题;

共建BIM桥梁,聚合团队。

本学习分享资料不得用于商业用途,仅做学习交流!!如有侵权立即删除!!

相关推荐
MaCa .BaKa29 分钟前
25-智慧旅游系统(协同算法)三端
java·javascript·vue.js·spring boot·tomcat·maven·旅游
MiyueFE33 分钟前
bpmn-js 源码篇9:Moddle - 对象格式的标准化定义库
前端·javascript
Debug 熊猫1 小时前
【Java基础】10章、单例模式、final关键字的使用技巧和使用细节、单例模式-懒汉式、单例模式-饿汉式【3】
java·javascript·后端·单例模式
好_快2 小时前
Lodash源码阅读-getSymbolsIn
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-baseAssignValue
前端·javascript·源码阅读
好_快2 小时前
Lodash源码阅读-copyObject
前端·javascript·源码阅读
猫猫不是喵喵.9 小时前
vue 路由
前端·javascript·vue.js
烛阴10 小时前
JavaScript Import/Export:告别混乱,拥抱模块化!
前端·javascript
bin915310 小时前
DeepSeek 助力 Vue3 开发:打造丝滑的表格(Table)之添加行拖拽排序功能示例12,TableView16_12 拖拽动画示例
前端·javascript·vue.js·ecmascript·deepseek