Learning vtkjs之MultiSliceImageMapper

多个图片切片

介绍

vtkImageMapper 为 vtk 提供了 2D 图像显示支持。

它可以与 vtkImageSlice 对象关联,并将其放置在渲染器中。

这个类使用与 vtkMapper 相同的方法解决重合拓扑问题。

效果

核心代码

主要流程

javascript 复制代码
	const fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({
      background: [0, 0, 0],
      rootContainer: vtkContainerRef.current,
    });
    const renderer = fullScreenRenderer.getRenderer();
    const renderWindow = fullScreenRenderer.getRenderWindow();

    const imageActorI = vtkImageSlice.newInstance();
    const imageActorJ = vtkImageSlice.newInstance();
    const imageActorK = vtkImageSlice.newInstance();
    renderer.addActor(imageActorK);
    renderer.addActor(imageActorJ);
    renderer.addActor(imageActorI);

    const reader = vtkHttpDataSetReader.newInstance({
      fetchGzip: true,
    });
    reader
      .setUrl(BaseUrlPross("data/volume/headsq.vti"), { loadData: true })
      .then(() => {
        const data = reader.getOutputData();
        const dataRange = data.getPointData().getScalars().getRange();
        // const extent = data.getExtent();

        const imageMapperK = vtkImageMapper.newInstance();
        imageMapperK.setInputData(data);
        imageMapperK.setKSlice(30);
        imageActorK.setMapper(imageMapperK);

        const imageMapperJ = vtkImageMapper.newInstance();
        imageMapperJ.setInputData(data);
        imageMapperJ.setJSlice(30);
        imageActorJ.setMapper(imageMapperJ);

        const imageMapperI = vtkImageMapper.newInstance();
        imageMapperI.setInputData(data);
        imageMapperI.setISlice(30);
        imageActorI.setMapper(imageMapperI);

        renderer.resetCamera();
        renderer.resetCameraClippingRange();
        renderWindow.render();

        updateColorLevel(imageActorI, (dataRange[0] + dataRange[1]) / 3);
        updateColorWindow(imageActorK, dataRange[1]);
      });

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

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

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

大鸿

WeChat : HugeYen

WeChat Public Account : BIM树洞

做一个静谧的树洞君

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

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

共建BIM桥梁,聚合团队。

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

相关推荐
福兮说9 小时前
设计稿是 #4A7C6F,页面量出来是 #4B7C6F:HEX、HSL、透明度、canvas 来回转的七个坑
前端·javascript·css·canvas
凤城老人10 小时前
从 PyQt6 到 Electron:给 Edge TTS 做一个“多角色配音机“的踩坑手记
javascript·typescript·electron
Dovis(誓平步青云)10 小时前
浇水提醒刚弹出又消失,植物状态别只存一个百分比
开发语言·前端·javascript·pdf·ecmascript·电脑
码艺-Alimjan11 小时前
Vben Admin 新增维吾尔语 Vben-Modal的关键坑之一
前端·javascript·vue.js
可乐鸡翅yeah_12 小时前
hls.js 手动自定义 http 请求 loader,修改请求头实战
开发语言·前端·javascript·网络协议·http·ecmascript·m3u8在线
yivifu13 小时前
中文古籍电子书注释集成
前端·javascript·python·beautifulsoup·epub
weixin_4482902513 小时前
书庐开发实战教学
javascript·css·html
默_笙13 小时前
🛴 从散件到整机:DeepAgents 与 Agent 身上预留的那些"插槽"(前置介绍)
前端·javascript
一木 之林14 小时前
DeepSeek Agent 开发(一)
开发语言·前端·javascript
樱花落木兰16 小时前
分布式登录实战:Session 会话共享改造,Redis 存储用户登录状态
java·javascript·数据库·redis·分布式·缓存