Question

在加载obj +文件时，THREE.js可以轻松地将tga或dds文件作为纹理加载。

表示他们的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为空，但materialInfo显示材料已从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

Answer 1

您需要更改mtl中的纹理路径。使用与js文件相关的路径。

如何使用obj + mtl加载多个jpg纹理文件THREE.js

1 个答案: