Model imported from Blender has shadowy facets on its flat faces

I’m importing a model from Blender as a .glb file. The face of it should be completely flat, but when I render it in threejs I see strange faceted shadows.

I thought the problem could be because the original geometry was quite complicated, but even after I simplified it in Blender the issue still shows up a bit.

Issue in the browser:

Simplified geometry in Blender:

GLB file: face-limitedissolve.glb (12.6 KB)
Blend file: face-limitedissolve.blend (569.6 KB)

Any ideas what I could do to fix that so I have clean-looking faces? My full model shows a lotttttt of these things, so it’d be nice to know how to clean them up.

Thank you.


You are casting and receiving shadows for all as you traverse the loaded model.
try adding a shadow.bias

  if (o.isMesh) {
    o.castShadow = true;
    o.receiveShadow = true;
    o.shadow.bias = -.003

Experiment with the value of the bias. I just used -.003 as an example.

1 Like

Thanks so much for the reply, Sean. I actually had to add the bias to the directional light, not the mesh object, and a value of -0.001 ended up working perfectly.

// make light
var dirLight = new THREE.DirectionalLight(0xffffff, 0.54);
dirLight.position.set( -8, 12, 8 );
dirLight.castShadow = true;
dirLight.shadow.mapSize = new THREE.Vector2(1024, 1024);   
// add bias
dirLight.shadow.bias = -0.001;

You can see a fixed demo here:

Yes of course, my bad.