Three.js: mesh does not receive shadow and is not detected by intersectObjects

Question

I have a WebGL Geometry Shape in Three.JS that is made by ExtrudeGeometry.
My problem is why it doesn't receive shadow (which is powered by THREE.SpotLight) or why Raycaster.intersectObject doesn't detect that!?
My shape is something like below:

var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
var mesh = THREE.SceneUtils.createMultiMaterialObject(geometry, [new THREE.MeshBasicMaterial({ color: color }), new THREE.MeshBasicMaterial({ color: color2, wireframe: true, transparent: false, wireframeLinewidth: 5 })]);
mesh.position.set(x, y, z);
mesh.rotation.set(rx, ry, rz);
mesh.scale.set(s, s, s);
mesh.castShadow = true;
mesh.receiveShadow = true;
scene.add(mesh);

It's ExtrudeGeometry natural, or what!?

Answer 1

This has nothing to do with the geometry.

THREE.SceneUtils.createMultiMaterialObject() achieves its effect by creating a parent object and two child meshes, each with the same geometry.

You need to set receiveShadow on the children, instead of the parent.

mesh.children[ 0 ].receiveShadow = true;
mesh.children[ 1 ].receiveShadow = true;

To get Raycaster.intersectObjects() to work on hierarchical objects, you need to pass in the recursive flag like so.

raycaster.intersectObjects( objects, true );

three.js r.59