Three.js object self shadow itself depending on geometry

Question

I have playing a little with clara.io and i want to reproduce an image done with it.

I have searched the web for days looking up to reproduce what they call "Realistic" rendering. As you can see on the image the six round part have they own shadows on the (one piece) brick from multiple lights sources.

I have no idea how they done that, if it is a simple setup, or a complex shader. the best i can do is that and i have no idea how to proceed to make and object shadowing itself depending of it's geometry.

any trails ?

Answer 1

ie. Actually it is a very simple setup. The THREE.Object3D has two attributes castShadow and receiveShadow You can achieve the effect you are looking for (ie. self-shadowing) by setting both to true

Answer 2

actually you need:

renderer.shadowMapEnabled = true;
light.castShadow = true;
object.castShadow = true;
object.receiveShadow = true;

i know its a little counter-intuitive that both the light and the mesh have the same attribute "castShadow", but that's how it works.

also remember to check the near, far, and size of the shadow camera of your light if the shadow doesn't appear or appears incorrectly.

here is an example i made: http://shahar.thenachts.com/threejs/examples/selfShadow.html

it takes some time to load the model (the model is the floor and walls) and it's textures, so be patient.

to see the code, right click anywhere and choose "inspect element".