关于xtk.js的使用（医疗影像处理插件）

由于公司项目需要，我学习了xtk.js，用于显示obj、vtk、mtl等文件中的内容。效果如图：

xtk.js能够实现obj文件的显示、3D影像的视口改变、影像移动、放大缩小，并能够适配平板端。

我主要是使用插件中的接口。

xtk.js是直接读取文件的，因此不能读取文件内容，需要封装一个File对象或者Blob对象来使用。

以上是我在项目中需要用到的插件。

minicolor.js是一个很好用的颜色选择器插件，会用到jquery.ui中的东西。

使用如下：用于改变mesh的颜色。

sidebar是可以自己写的一个样式文件（不重要），会用到jquery.ui中的东西。

下面着重说一下xtk.js的使用过程。

这次项目中我主要用到了mesh（网格）对象->这个对象需要自定义，是xtk中很小的一部分。

这是我需要用到的，而xtk中提供的如下：

而这些数据是用于一个叫X的对象的；

这就是X对象中的mesh需要用到我们刚才创建的data。

实际上有：

volume = new X.volume();

mesh = new X.mesh();

fibers = new X.fibers();

等X对象的属性。

结束了上面的一些准备工作，以及DOM操作后进行文件读取：

下面这个函数是读取文件的入口

//解析文件内容并创建3d对象（Parse file data and setup X.objects）
function parse(data) {var fname = data['mesh']['file'][0].name.split(".")[0].toString().replace(" ", '');// 初始化文件读取initializeRenderers();//设置影像的mesh（图像颜色和透明度）if (data['mesh']['file'].length > 0) {mesh[fname] = new X.mesh();// we have a meshmesh[fname].file = data['mesh']['file'].map(function (v) {return v.name;});mesh[fname].filedata = data['mesh']['filedata'];ren3d.add(mesh[fname]);// add the mesh}ren3d.camera.position = [0, 500, 0];ren3d.render();
}

//创建3d影像的对象
function initializeRenderers() {if (ren3d) {return;}_webgl_supported = true;try {ren3d = new X.renderer3D();// 创建 XTK renderersren3d.container = 'imageBox';ren3d.init();ren3d.interactor.onMouseWheel = function (e) {};} catch (Error) {window.console.log('WebGL *not* supported.');_webgl_supported = false;$('#imageBox').empty();// 出现异常或浏览器不支持则删除3d对象}ren3d.onShowtime = function () {for (var i = 0; i < files.length; i++) {var curfname = files[i].name.split(".")[0].toString().replace(" ", '')mesh[curfname].opacity = meshObj[curfname].opacity; //---------------------------初始化影像透明度---------------------------mesh[curfname].color = meshObj[curfname].color;//---------------------------初始化设置影像颜色---------------------------}};
}

通过以上操作，就可以实现我的项目功能了。

然而，在远程文件读取的过程中会遇到很多问题：

1、大型文件的异步请求问题：用到了闭包来保证文件顺序即使用立即执行函数（function（）{}（））；

2、大型文件传输速度慢：压缩后再传输进行解压缩（zip.js）；

3、xtk.js工作时遇到很多的大型文件同时加载会出现问题：缓冲区分配失败——需要对影像进行降维处理，问题还在解决中，或许还可以从three.js的学习中找到解决方案。

关于xtk.js的使用（医疗影像处理插件）相关推荐

js网页3D雪花特效插件(导入直接使用，参数齐全)
//导入js类库 <script src="js/snow/threecanvas.js"></script> <script src="j ...
js网页雪花效果jquery插件
1,使用前先导入jquery类库 2,导入雪花特效js类库 jq.snow.min.js 3,初始化代码 <script>$(function(){$.fn.snow({minSize : ...
插件合并css,介绍几个JS和CSS压缩合并插件—冠朔wordpress插件
由于添加各种功能的代码和JS 和CSS 压缩合并插件,方便初学者进行优化. Better WordPress Minify Better WordPress Minify 是将Minify引擎集成到w ...
js原生刻度尺滚动滑块插件
为什么80%的码农都做不了架构师?>>> js原生刻度尺滚动滑块插件用的MUI框架,原生兼容性很好,性能也更好,所以费了很大的力气改成原生的分享给大家. 有时间了改成手机版. ...
php图片批量上传插件下载,vue.js图片批量上传插件
vue.js图片批量上传插件是一款基于vue.js框架的图片上传控件,适用于手机端的图片上传代码,支持批量上传,拖到图片上传,显示文件数量和大小等功能 js代码 // import up from ' ...
html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览准备首先在页面中 ...
原生JS实现移动端选择器插件
原生js实现移动端选择器插件仓库地址在线预览(记得将浏览器切换到手机模式) 预览准备首先在页面中引入css,js文件每次需要弹出该组件时通过new一个实例来生成,代码如下: var data ...
sys-calendar.js带节假日的日历插件
下载地址 sys-calendar.js带节假日的日历插件,代码引用比较多. dd:
JS PC端时间日历插件功能齐全无依赖
时间日历插件,网上有很多版本,功能强大的,功能简单的数不尽数,那为什么我还要写一个日历插件呢? 很认真的告诉你: 我手痒了,就是闲下来随便敲敲. 开发一个功能齐全的日期选择插件根据自己的业务需求不断 ...

关于xtk.js的使用（医疗影像处理插件）

关于xtk.js的使用（医疗影像处理插件）相关推荐

最新文章

热门文章