小程序three.jsobj的簡單介紹

本文目錄一覽：

• 1、如何使用Three.js加載obj和mtl文件
• 2、ThreeJS渲染一個.obj三維模型文件（Vue）
• 3、關於three.js導入obj模型後進行移動的問題

如何使用Three.js加載obj和mtl文件

使用Three.js加載obj和mtl文件方法：

var onProgress = function(xhr) {

    if (xhr.lengthComputable) {

        var percentComplete = xhr.loaded / xhr.total * 100;

        console.log(Math.round(percentComplete, 2) + ‘% downloaded’);

    }

};

var onError = function(xhr) {};

THREE.Loader.Handlers.add(/\.dds$/i, new THREE.DDSLoader());

var mtlLoader = new THREE.MTLLoader();

mtlLoader.setPath(‘/uploads/160601/obj/’);

mtlLoader.load(‘egg.mtl’, function(materials) {

    materials.preload();

    var objLoader = new THREE.OBJLoader();

    objLoader.setMaterials(materials);

    objLoader.setPath(‘/uploads/160601/obj/’);

    objLoader.load(‘egg.obj’, function(object) {

        object.position.y = -0.5;

        scene.add(object);

    }, onProgress, onError);

});

ThreeJS渲染一個.obj三維模型文件（Vue）

先來看一個效果：

最近有個項目需要實現三維模型的web端渲染，以前雖然也做過類似的項目，單是兩個項目一個是java Application，一個是安卓結合，兩個我都只參與到的建模環節，所以知道三維模型文件的大概結構，要想在web端實現渲染，首先要做的就是讀取這些模型文件，對裏面的點、面、法線、材質進行逐行解析。

各種對比後，發現了ThreeJS。它不僅可以解析obj模型文件，還可以解析大部分市場上有的模型格式文件。

npm 安裝後，在node_modules/three/examples/jsm/loaders/目錄下可以看到它支持的模型格式。

PS：demo中使用了最流行vue語法。

組件註銷前，解綁全局事件、停止刷新。beforeDestroy()

效果如下：

PS：鼠標移入時，先暫存材質的顏色，移除後再恢復。實現過程有bug，getHex()未得到有效的顏色，所以恢復不到原有的材質顏色，正在查找原因。如有有哪位大神發現問題，請賜教。

優化內容：

2.頁面組件銷毀時，解綁鼠標事件

3.組件銷毀時，清除緩存數據

關於three.js導入obj模型後進行移動的問題

我之前用three.js寫過demo不是很熟，但思路應該是，new 一個 Object3D

然後add(加載的對象)

移動這個整體的對象就行了