由於公司專案需要，我學習了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();

結束了上面的一些準備工作，以及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的學習中找到解決方案。