Replacement of material in loaded gltf breaks rendering

Questions
,
1

I am loading a gltf file with one mesh in it. Replacing its material results in a black screen

min example (uncomment line 38 for broken behaviour):
https://jsfiddle.net/laubeee/m58vqpbe/3/

only changing the existing materials properties works perfect, but as soon as I replace it with a new material object, it breaks. Any idea why? Is the file broken?

I also tried recursive approaches as discussed in Change gLTF Material OnClick and similar, with the same result.

2

Hi!
The original material has flatShading: true, if you set that parameter for your new material, you’ll see the object.
The reason that the object is black (it’s just the same color with the background), when you apply the new material, is that your geometry doesn’t have normal attribute. So, mesh.geometry.computeVertexNormals() is another option to solve the issue.

3

Thanks for the quick reply! That solved it.

Just to understand what is happening (please correct if wrong):

  • Three.js uses smooth shading per default, which requires vertexNormals
  • Those are not present hence nothing can be rendered
  • Solutions are either computing vertex Normals or “disabling smooth shading” (enabling flatShading)
  • GLTFLoader automatically sets flatShading if vNormals are missing
4

Not nothing, the color of material becomes pure black.

I think @donmccurdy can say more about it :slight_smile:

5

It’s interesting because I didn’t have this kind of behaviour with OBJ format… it doesn’t have the VN either (just vertices and faces) but that loader is quite slow in comparison and appears to automatically compute normals

6

The glTF format does specify that meshes without normals default to flat shading. In general when replacing materials on a loaded mesh you may need to carry over the state of properties like .flatShading or .vertexColors to keep those enabled.

I’m not sure why OBJLoader computes normals by default, but (regardless) it will definitely be a slower format to parse.

2 Likes