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

编辑：这个答案现在已经过时了。相反，请参阅@mightypile的答案。

假设您已正确定义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

，我的页面无法加载。根据{{3}}的Atul_Mourya的说法，在加载时在回调内部实现函数是一个更好的（或最新的？）想法。我将他的建议与discourse.threejs.org和@WestLangley的documentation结合在一起，回答了相同的问题，以得出：

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'")
    }
);

此示例还实现了进度和错误的回调，并且对我有用。

Answer 3

我使用SketchUp制作了模型。当我从SketchUp导出为OBJ文件格式时，生成的zip文件包含一个MTL文件；

此代码将同时加载MTL文件和OBJ文件；成功加载后scene.add(object)时，纹理将自动呈现（无需分配给child.material.map）

const loader = new OBJLoader(manager);

const materialsLoader = new MTLLoader(manager);

materialsLoader.load('models/obj/sketchup_export/d2e8bc61-6dd1-4554-b874-13b5364d656e.mtl', function (materialsCreator) {

    // https://threejs.org/docs/#examples/en/loaders/OBJLoader.setMaterials
    loader.setMaterials(materialsCreator);


    loader.load('models/obj/sketchup_export/d2e8bc61-6dd1-4554-b874-13b5364d656e.obj', function (obj) {

        object = obj;

    }, onProgress, onError);

}, onProgress, onError);

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

3 个答案: