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桥梁,聚合团队。

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

相关推荐
尾善爱看海2 小时前
Vue 面试收官篇:SSR、性能优化落地、30 道高频面试题精讲(附标准答案)
前端·javascript·vue.js·面试·vue
李明卫杭州7 小时前
React 复合事件系统对比解析
前端·javascript·react.js
LEE8 小时前
前端转型全栈 01:数据建模,前端最大的盲区
前端·javascript·后端
雪芽蓝域zzs8 小时前
第四十七节:驾驶舱大屏 ECharts 图表集成
前端·javascript·vue.js
梦醒沉醉9 小时前
7、表达日期和时间(前朝遗老Date)
javascript
雪芽蓝域zzs10 小时前
第四十九节:TagsView 右键菜单(带三角箭头)给每个 tag 增加**鼠标右键菜单**(右键标签弹出:关闭、关闭其他、关闭全部)
前端·javascript·vue.js
এ慕ོ冬℘゜10 小时前
从零开发移动端医院挂号页面:适配、交互与前端实现详解
前端·javascript
宁渡AI大模型10 小时前
AI 全栈面试新趋势:Vibe Coding、前端、Java 后端高频面试题深度解析|河南宁渡科技有限公司编程教程
java·javascript·人工智能·python·ai大模型
东风微鸣11 小时前
AI依赖更新别裸奔🚨
javascript
研☆香11 小时前
echarts图表的使用方法
javascript