I'm currently in the process of developing a game engine using ThreeJS, and I have encountered an issue with lighting that I need assistance with.
My project involves creating a grid-based RPG where each cell consists of a 10 x 10 floor and possibly a ceiling. I aim to make the ceiling cast a subtle shadow on the floor to give the environment a more open or dungeon-like feel. To achieve this effect, I am utilizing 3 lights.
In this basic illustration, you can see the setup with 3 lights. The floors are constructed using 4 meshes, while the ceilings use 2 meshes with LambertMaterial applied.
https://i.sstatic.net/n9748.png
Despite my efforts, I am encountering an issue where the shadows appear completely black, even when the lower PointLight is incorporated. Additionally, only the mesh closest to the camera casts a shadow among the two "ceiling" meshes shown in the diagram. As a beginner in lighting and shadows within ThreeJS, I am seeking advice on how to create a more realistic shadow effect.
Furthermore, I have noticed some artifacts present in the meshes. Could these be caused by having multiple meshes rather than just two (one for the ceiling and one for the floor)? I opted for individual meshes per floor cell to allow for multiple textures on the map. Is there a better way to address this issue?