Three.js - Creating shadows with MeshFaceMaterial

Question

I have tried a few different lights now (Directional, Spot, Point), but none of them produce a nice shadow on MeshFaceMaterial objects. Instead, the entire MeshFaceMaterial object will become black.

My Test Website (please view with a grain of salt, constantly being changed).

How can I use lights to create shadows on MeshFaceMaterials? Does MeshFaceMaterial support shadows? The documentation says "Affects objects using MeshLambertMaterial or MeshPhongMaterial."

Here is sample code of how I am loading .json model.

loader.load('sample-concrete.js', function ( geometry, materials ) {  
    mesh1 = new THREE.Mesh(
        geometry, new THREE.MeshFaceMaterial( materials )
    );

    mesh1.rotation.x = -Math.PI / 2;
    scene.add( mesh1 );
});

and here is a sample of the material from my .json file.

"materials": [
{
"DbgIndex" : 0,
"DbgName"  : "Steel",
"colorDiffuse"  : [0.3059, 0.0471, 0.0471],
"colorAmbient"  : [0.3059, 0.0471, 0.0471],
"colorSpecular"  : [1.0000, 1.0000, 1.0000],
"transparency"  : 1.0,
"specularCoef"  : 25.0,
"vertexColors" : false
}

Thank you.

First HemisphereLight does not support shadows. Only DirectionalLight and SpotLight. Then all your .castShadow are false so they will never cast a shadow. — gaitat
Yes, I know HemisphereLight does not support shadows. DirectionalLight and SpotLight do not work with MeshFaceMaterial though. — jmcmahon443
Seems to me like it is casting shadows. @gaitat, you should put your comment as an answer I think. — 2pha
My comment above about DirectionalLight and SpotLight not working was incorrect. They do appear to be working. — jmcmahon443

gaitat gaitat · Accepted Answer · 2015-05-06T20:35:37

A MeshFaceMaterial is just a collection of materials. So if your materials variable contains MeshLambertMaterial or MeshPhongMaterial you should be fine. Shadows will be generated from a DirectionalLight or a SpotLight.

Just make sure your renderer has:

renderer.shadowMapEnabled = true;

your light has:

light.castShadow = true;

each one of your meshes:

mesh.castShadow = true;

and you have at least one object (a plane for example) where you do:

plane.receiveShadow = true;

Three.js - Creating shadows with MeshFaceMaterial

1 Answers