Shadows intersecting on flat 2-sided objects

Questions
,
1

hi all, I’ve run into a problem with a project I’m working on. I’m building dynamic boxes, the boxes are built by generating a bunch of planes and then positioning them, then for the inside of the box I copy each plane and flip it (because as I understand it Three.JS doesn’t support 2-sided materials, Finally I add these all together in a group to make my box. This all works fine, but I’ve run into a problem into is that I’m getting weird shadows on my box. I’ve tried adjusting the shadow bias, which works, the problem is I have to increase it so much that it makes the shadows appear visibly distanced from the object casting the shadow.

I’ve tried increasing the scale of the the project but this didn’t solve the problem.

Is there a way to avoid this? I’ve thought that the best approach might be to make the boxes have some distance between the inside and outside walls, although this would be considerably more work and create more geometry, something I’m trying to avoid.

Any other tips on how I could solve this?

image
image2446×1220 157 KB

no shadow bias

image
image1920×1047 266 KB

2

Have you tried setting the Material.side property to THREE.DoubleSide?

3

Thanks, I wasn’t aware of this feature, unfortunately it doesn’t seem to solve the shadow option. I guess my best option is to give the boxes some thickness by offsetting the interior of the box somewhat.

4

had similar issue. setting the shadow bias to -0.01. has solved the problem

5

It seems z-fighting? the wall is too thin.