Assigning materials to an OBJLoader model in three.js

Question

I\'ve imported an OBJ model with the following code:

var loader = new THREE.OBJLoader();
loader.addEventListener(\'load\', function (geometry) {
    object = geo         


        

Answer 1

Using @WestLangley's answer, I kept getting the error

loader.addEventListener is not a function

and my page would not load. According to Atul_Mourya at discourse.threejs.org, it is a better (or more up-to-date?) idea to implement the function inside of a callback while loading. I combined his advice with the documentation and @WestLangley's helpful function answering this same question to come up with:

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

This example also implements callbacks for progress and error, and it worked for me.