Materials in exported Blender model for Three.js not working

Question

I am trying to use a model created with Blender with Three.js The model is very basic, two cubes on top of each other. One cube is red and the other is green.

I have exported the model using the Blender exporter plugin of Three.js When I assign a material manually to the object like:

loader.load("model.js", function ( geometry, material ) {

    material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } );

    mesh = new THREE.Mesh( geometry, material);

    scene.add(mesh);

    animate();

});

there is no problem as shown at https://googledrive.com/host/0B9t0vRo6sUnzWndDTGxicENIdDg/index.html

However when I remove the line:

material = new THREE.MeshBasicMaterial( { color: 0xFF0000 } );

the material of the model is used. Which produces an error of Three.js:

TypeError: program is undefined [Break On This Error]

p_uniforms = program.uniforms,

You can see this for yourself at https://googledrive.com/host/0B9t0vRo6sUnzWndDTGxicENIdDg/index2.html

Does anyone have an idea what could cause this problem? You can download the Blender file at https://googledrive.com/host/0B9t0vRo6sUnzWndDTGxicENIdDg/model.blend

Answer 1

Easy. The materials is an array. You need to do the following:

loader.load( "model.js", function ( geometry, materials ) {

    mesh = new THREE.Mesh( geometry, materials );

    scene.add( mesh );

    animate();

} );

three.js r.88