关于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 mesh
        mesh[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 renderers
        ren3d.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的学习中找到解决方案。