In this example:
The shadow on the pink surface from the sphere is much lighter than the shadows on the teal background.
How can we make the shadow on the pink surface darker like it is on the teal background surface?
Original post, for more detail
The center plane is composed of a DOM element beneath the canvas (rendered with
CSS3DRenderer), and shadow is casted onto a transparent plane that is aligned with the DOM element (with
WebGLRenderer). The transparent plane is what slices the Sphere as well as the background Plane in order to give the illusion that the DOM element is intersecting with the WebGL meshes.
I’d like to make the lighting consistent on all the objects so the shadows are the same “darkness”.
How can I achieve this?
One thing I tried to do is change the opacity of the transparent Plane (line 139) to something higher than 0.08, like 0.5, and the shadow will be more realistic:
But the negative side effect of this is that the DOM element will seem to get darker overall. For example, if I change the opacity to 0.7, then the element is too dark:
And opacity of 1 completely hides the element:
How can we achieve better lighting on fully transparent surfaces to give a better effect of lighting on the DOM element (darker shadows without darkening the DOM element)?
Maybe if we had selective lighting in Three.js, I could adjust the effect using multiple lights (some for shadows, others for lighting). There would be two point lights: one point light casts shadow on the background, and the other one casts shadow onto the transparent plane representing the DOM element. I could then adjust the shadow qualities for each surface independently for each light, thus being able to finally make the whole scene look like it has more realistic lighting.