Shane McCarthy Shane McCarthy - 1 month ago 21
Javascript Question

Shadows not received on faces in ThreeJS Object Group

I have a problem with shadows not being received on the faces in an Object3D group.

The shadows are being cast from the objects and received by the ground, but the shadows are not received by each other when they should.

I've searched around but I can't seem to find a similar problem which leads me to believe I'm setting something up incorrectly.

Would anyone be able to take a look? I've put a working example in the below JSfiddle. I think it might be an issue with the way I'm setting up the faces.

https://jsfiddle.net/shanemccster/848k1qxh/

var makeobject = function(width, height, depth){
logger('makeobject fired');
var geometry = new THREE.BoxGeometry( width, height, depth );
var materials = [
new THREE.MeshLambertMaterial({ color: 0xffffff }),
new THREE.MeshLambertMaterial({ color: 0xffcc00 }),
new THREE.MeshLambertMaterial({ color: 0xffffff }),
new THREE.MeshLambertMaterial({ color: 0xffcc00 }),
new THREE.MeshLambertMaterial({ color: 0xffffff }),
new THREE.MeshLambertMaterial({ color: 0xffcc00 })
];
var texture = new THREE.MeshFaceMaterial( materials );
texture.minFilter = THREE.LinearFilter;
var theObject = new THREE.Mesh(geometry,texture);
theObject.recieveShadow = true;
theObject.castShadow = true;
return theObject;
}

Answer

You need to set the receiveShadow flag on your meshes. Look at the documentation of Object3D which is the parent of Mesh.

https://jsfiddle.net/woa7kzz1/

Comments