Assigning materials to an OBJLoader model in three.js
EDIT: This answer is now outdated. Instead, see the answer by @mightypile.
Assuming you have properly defined material
, try this:
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.traverse( function ( child ) {
if ( child instanceof THREE.Mesh ) {
child.material = material;
}
} );
scene.add( object );
});
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.