Shadows are not right with meshes

Questions
1

Hi,

I am getting some weird shadows when using meshes, I don’t think it is a bug, just me not using it properly.
Facet next to each other are showing wrong shadows. Looking at the big cylinder, I would expect its surface to look much smoother.

image
image694×601 109 KB

I have tried to change the lights but the issue remains. At first I thought i could be the shadow bias, but I am only using an HemisphereLight and it does not cast shadows.

Here are the lighting settings I am using

this.scene = new THREE.Scene();
const axesHelper = new THREE.AxesHelper(3);
this.scene.add(axesHelper);

const light = new THREE.HemisphereLight(0xffffff, 0xb1b1b1, 2);
light.position.set(100, 100, 100);
this.scene.add(light);
var helper = new THREE.HemisphereLightHelper( light, 5 );
this.scene.add( helper );

this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.autoClear = false;

this.renderer.physicallyCorrectLights = true;
this.renderer.toneMappingExposure = Math.pow(0.7, 5.0);  // -> exposure: 0.168

this.renderer.setClearColor(0x000000, 0.0);
this.renderer.setPixelRatio(window.devicePixelRatio);
this.renderer.setSize(window.innerWidth, window.innerHeight);
this.renderer.sortObjects = false;

this.renderer.shadowMap.enabled = false;
this.renderer.shadowMap.type = THREE.PCFShadowMap;

The only thing that seems to help is changing the Hemisphere lights to be the same, but then I loose all the shadows
const light = new THREE.HemisphereLight(0xffffff, 0xffffff, 2);

image
image563×569 33.9 KB

Any ideas about what could be wrong?

2

Did you try flatShading on your model? I think this is more mesh related than light.

mesh.material['flatShading] = true

or for group of objs

group.traverse( o => o.material['flatShading'] = true )

3

Unfortunately, flatShading did not change a single thing.
Here is the material used for the mesh, in case that can help

this.solidBodyMaterial = new THREE.MeshLambertMaterial({
  side: THREE.DoubleSide,
  color: 0x5c6887,
  polygonOffset : true,
  polygonOffsetFactor : 1,
  polygonOffsetUnits : 1});
this.solidBodyMaterial.flatShading = true;
4

How does you model look in a 3D Viewer like https://gltf-viewer.donmccurdy.com/ (Thats only for glTF)
or in the THREEjs Editor https://threejs.org/editor/
What format do you have?

5

Something related: Smooth shading results in weird edges?

6

Thanks for the help, unfortunately the format is proprietary.
But I think i have found the issue, the issue is with my vertex and or the normals. The normals provided are not great, and even with computeVertexNormals(), the results is not very good, so maybe my facet vertices are in incorrect order.
I will continue digging in that direction.

@prisoner849 your solution also points at normal, so it is comforting.

Thanks.