将材料分配给三个.js中的OBJLoader模型

Question

我使用以下代码导入了一个OBJ模型:

var loader = new THREE.OBJLoader();
loader.addEventListener('load', function (geometry) {
    object = geometry.content;
    scene.add(object);
});
loader.load('ship.obj');

它工作正常,但每当我尝试添加一个材料时,它要么没有效果,要么模型消失.我以为我可以这样做:

var ship = new THREE.Mesh(object, material);

但这不起作用.有没有人知道这样做的方法,或者甚至可能吗？我也试过使用OBJMTLLoader,但它只是增加了复杂性,但仍然不允许我更改材料.

Answer 1

假设您已正确定义material,请尝试以下操作:

loader.addEventListener( 'load', function ( event ) {

    var object = event.content;

    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material = material;

        }

    } );

    scene.add( object );

});

Answer 2

使用@WestLangley 的回答，我不断收到错误消息

loader.addEventListener is not a function

我的页面无法加载。根据discourse.threejs.org上的 Atul_Mourya 的说法，在加载时在回调内部实现函数是一个更好的（或更先进的？）想法。我将他的建议与文档和@WestLangley 的有用功能结合起来回答了同样的问题，提出了：

var ship_material = new THREE.MeshBasicMaterial( { color: 0x444444 } );
var loader = new THREE.OBJLoader();
loader.load( 'ship.obj',
    function( obj ){
        obj.traverse( function( child ) {
            if ( child instanceof THREE.Mesh ) {
                child.material = ship_material;
            }
        } );
        scene.add( obj );
    },
    function( xhr ){
        console.log( (xhr.loaded / xhr.total * 100) + "% loaded")
    },
    function( err ){
        console.error( "Error loading 'ship.obj'")
    }
);

这个例子还实现了进度和错误的回调，它对我有用。