如何在 THREE.js r74 及更高版本中使用 OBJLoader 和 MTLLoader

问题描述

似乎 OBJMTLLoader 最近已被移除(r74?)，但是我无法找到有关如何使用这两个替换类的任何文档.这是我当前的代码(改编自 Three.js 手册):

It seems that OBJMTLLoader has been removed recently (r74?), but I cannot track down any documentation on how to use the two replacement classes. Here is the current code I have (adapted from Three.js Cookbook):

<script src="../libs/three.r74.js"></script>
<script src="../libs/MTLLoader.js"></script>
<script src="../libs/OBJMTLLoader.js"></script>

<script>
var legoManMesh = null;
function init(){ /* Create my scene here */ }

var loader = new THREE.OBJMTLLoader();
loader.load("../assets/models/lego.obj", "../assets/models/lego.mtl",
  function (obj) {
    legoManMesh = obj;
    init();
    }
  );
</script>

(顺便说一句，当从 r69 移动到 r74 时，上述代码失败并显示TypeError: loader.setCrossOrigin is not a function")

(BTW, when moving from r69 to r74 the above code fails with "TypeError: loader.setCrossOrigin is not a function")

附加:

此处的示例lego.mtl 文件使用相对路径引用了纹理png.

The sample lego.mtl file here references a texture png using a relative path.

# Blender MTL File: 'LEGO Minifigure - Blendswap.blend'
# Material Count: 2

newmtl Cap
Ns 96.078431
Ka 0.000000 0.000000 0.000000
Kd 0.990000 0.120000 0.120000
Ks 0.500000 0.500000 0.500000
Ni 1.000000
d 1.00000
illum 2

newmtl Minifig
Ns 874.999998
Ka 0.000000 0.000000 0.000000
Kd 0.800000 0.800000 0.800000
Ks 0.200000 0.200000 0.200000
Ni 1.000000
d 1.000000
illum 2
map_Kd ../textures/Mini-tex.png

推荐答案

以下是演示如何在 r74 中加载 .obj 和 .mtl 文件的代码:

Here is code that demonstrates how to load .obj and .mtl files in r74:

var mesh = null;

var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath( "https://threejs.org/examples/models/obj/walt/" );
mtlLoader.load( 'WaltHead.mtl', function( materials ) {

  materials.preload();

  var objLoader = new THREE.OBJLoader();
  objLoader.setMaterials( materials );
  objLoader.setPath( "https://threejs.org/examples/models/obj/walt/" );
  objLoader.load( 'WaltHead.obj', function ( object ) {

    mesh = object;
    mesh.position.y = -50;
    scene.add( mesh );

  } );

} );

小提琴:http://jsfiddle.net/g2evz0q5/

更新了答案以反映完整性的更正.

Updated answer to reflect correction for completeness.

这篇关于如何在 THREE.js r74 及更高版本中使用 OBJLoader 和 MTLLoader的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！