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

最近似乎是OBJMTLLoader has been removed（r74？），但我无法追查有关如何使用这两个替换类的任何文档。这里是当前代码我已经（改编自Three.js Cookbook）：如何在THREE.js r74及更高版本中使用OBJLoader和MTLLoader

<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上述代码时失败，“类型错误：loader.setCrossOrigin是不是一个函数”）

补充：

样品lego.mtl文件引用在这里使用相对路径纹理PNG。

# 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

来源

2016-02-13 Darren Cook

只看源头[这里]（https://github.com/mrdoob/three.js/blob/r74/examples/js/loaders/OBJLoader.js）和[here]（https：// github的.com/mrdoob/three.js所/斑点/ R74 /示例/ JS /装载机/ MTLLoader.js）。你可以看到它们都有一个'load'函数，第二个参数是回调函数。 – 2pha

看一下这个例子：http://threejs.org/examples/webgl_loader_obj_mtl.html – gaitat

这里是代码，演示了如何加载.OBJ和.mtl文件在R74：

var mesh = null; 

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

    materials.preload(); 

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

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

    }); 

});

小提琴在：http://jsfiddle.net/dw62cxpy/2/

更新的答案，以反映完整性校正。

来源

2016-02-16 02:26:37 gaitat

谢谢gaitat。我试了一下，在“threejs-cookbook/03-camera/undefined ../ textures/Mini-tex.png”上得到了404。我更新了我的问题，以显示mtl文件具有png纹理，保存在相对路径中。 404 URL中的undefined使我认为这可能是可以解决的？ –

（PS即使我将png移动到与mtl文件相同的目录中，它仍然无法加载，并编辑mtl文件以匹配。现在，404已经在“threejs-cookbook/03-camera/undefinedMini-tex.png “！） –

得到它的工作：以及'mtlLoader.setPath（”http://threejs.org/examples/obj/walt/“）;''你需要''mtlLoader.setBaseUrl（”http://threejs.org/examples/obj/walt /“）;' –

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

回答

相关问题