如何使用obj + mtl加載多個jpg紋理文件THREE.js

當加載obj +文件時，THREE.js可以輕鬆地將tga或dds文件加載爲紋理。如何使用obj + mtl加載多個jpg紋理文件THREE.js

在他們的OBJ + MTL例子（https://threejs.org/examples/#webgl_loader_obj_mtl）例如：

// this line adds all the tga texture files 
THREE.Loader.Handlers.add(/\.tga$/i, new THREE.TGALoader());

但是，我的紋理文件是JPG。我如何加載它們？我被告知我可以使用TextureLoader，但它的工作方式不同，我認爲？什麼是適當的格式？因爲紋理仍然沒有彈出。

這是我的代碼：

THREE.Loader.Handlers.add(/\.jpg$/i, new THREE.TextureLoader()); 

var mtlLoader = new THREE.MTLLoader(); 
    mtlLoader.setPath('assets/sac_grain/bag_of_grain/'); 
    mtlLoader.load('sg1.mtl', function(materials) { 
    console.log('mats', materials); 
    materials.preload(); 

    var objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath('assets/sac_grain/bag_of_grain/'); 
    objLoader.load('sg1.obj', function (object) { 

     object.position.y = 10; 
     object.position.x = -10; 
     scene.add(object); 

    }, onProgress, onError); 

    });

當我看到材料在控制檯中，materialArray是空的，但materialsInfo表明，材料已離MTL文件的信息。

lsArray:Array(0) 
materialsInfo:Object 
default10:Object 
    d:"1.0" 
    illum:"2" 
    ka:Array(3) 
    kd:Array(3) 
    ke:"0.0 0.0 0.0" 
    ks:Array(3) 
    map_kd:"textures/burlap.jpg" 
    name:"default10" 
    ns:"100.0" 
... etc ...

任何幫助將非常感激，我一直停留在這幾天的了。

這裏是我的MTL文件：

# Exported from Wings 3D 1.4.1 
newmtl default10 
Ns 100.0 
d 1.0 
illum 2 
Kd 1.0 1.0 1.0 
Ka 1.0 1.0 1.0 
Ks 1.0 1.0 1.0 
Ke 0.0 0.0 0.0 
map_Kd burlap.jpg 

newmtl default11 
Ns 100.0 
d 1.0 
illum 2 
Kd 1.0 1.0 1.0 
Ka 1.0 1.0 1.0 
Ks 1.0 1.0 1.0 
Ke 0.0 0.0 0.0 
map_Kd grains.jpg

來源

2017-05-05 aeiou

它看起來像您的材料指定路徑爲紋理/ burlap.jpg。如果實際上路徑是assets/sac_grain/bag_of_grain/textures/burlap.jpg，您將需要修改mtl文件以適應。這不是three.js的限制，而是在Web上使用OBJ文件。 – Radio

@Radio - 感謝您的幫助。我需要mtl文件中的JPG文件的完整路徑？有沒有辦法只使用相對路徑？ – aeiou

mtlLoader不是Three.js基本構建的一部分，它是如何將資源加載到three.js中的示例。因此，最好的開始是看代碼。例如，MTL加載器在這裏：https://github.com/mrdoob/three.js/blob/dev/examples/js/loaders/MTLLoader.js對該類的快速研究表明作者已經爲該情況進行了調配在第61行提供了功能和簡短的解釋。 – Radio

-1

您需要更改MTL內部紋理路徑。使用與js文件相關的路徑。

來源

2017-05-08 11:30:12 mjanisz1

這已在2天前的評論中提及。 OP寧願不這樣做。在這種情況下，使用MTLLoader的setTexturePath函數。 – Radio

如何使用obj + mtl加載多個jpg紋理文件THREE.js

回答

相關問題