Shadows intersecting on flat 2-sided objects

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?

no shadow bias

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

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.

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

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