javascript - How to assign a material to ColladaLoader or OBJLoader

Question

I have looked through the documentation as well as many examples and wasn't able to find correct syntax for assigning a material to either a Collada .dae or OBJLoader .obj file.

Json files seem to properly work when creating a Mesh and having the loader as geometry and material as the set material.

Code like this works

var loader = new THREE.JSONLoader();
loader.load( "modelPath.js", function(geometry){
  var material = new THREE.MeshLambertMaterial({color: 0x666666});
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

This does not work

var loader = new THREE.ColladaLoader();
loader.load( "modelPath.dae", function(geometry){
  var material = new THREE.MeshLambertMaterial({color: 0x666666});
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

And this does not work

var loader = new THREE.OBJLoader();
loader.load( "modelPath.obj", function(geometry){
  var material = new THREE.MeshLambertMaterial({color: 0x666666});
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
});

I have also tried geometry.material = new THREE.MeshLambertMaterial({ color: 0xff0000}); inside function(geometry) without success.

.Dae format seems to keep material color directly from 3D programs like Cinema. How can I set a material to these loaders properly? If this is even possible.

Answer 1

Follow this pattern for OBJLoader:

var loader = new THREE.OBJLoader();

loader.load( 'model.obj', function ( object ) {

    var material = new THREE.MeshLambertMaterial( { color: 0x666666 } );

    object.traverse( function ( child ) {

        if ( child instanceof THREE.Mesh ) {

            child.material = material;

        }

    } );

    scene.add( object );

} );

For ColladaLoader, the pattern is similar.

var loader = new THREE.ColladaLoader();

loader.load( 'model.dae', function ( collada ) {

    var dae = collada.scene;
    scene.add( dae );

} );

three.js r.62