javascriptthree.jsstl-format

Three js smooth shading appearing flat

I'm loading .stl files, applying MeshStandardMaterial without touching the flatShading property as by default it is false.

enter image description here

The result looks very flat to me. If I try setting flatShading: true the result is the same.

I've tried everything I could think of but have ran out of ideas - any suggestion would be welcome, thanks.

geometry.computeVertexNormals();
geometry.computeBoundingBox();
geometry.computeBoundingSphere();
geometry.normalizeNormals();
Solution

  • The result looks very flat to me. If I try setting flatShading: true the result is the same.

    STLLoader always returns a non-indexed buffer geometry (unconnected triangle soup). That means the geometry's faces share no vertices and thus using BufferGeometry.computeVertexNormals() can not produce normals required for smooth shading.

    Also recomputing bounding volumes and the usage of BufferGeometry.normalizeNormals() are unrelated to this issue.

    You can try to solve this issue by ensuring the asset comes with normals that allow smooth shading. Or you give BufferGeometryUtils.mergeVertices() a try which produces an indexed geometry by merging vertices.