Collada model loaded in Black - three.js

Question

I have copied the example given in the official three js repo of how to load the DAE Collada model, modified it to remove the animations, and loaded my own Collada model.
The problem is that the model loads in black as you can see in this codesandbox, and I wasn't able to change the material color!
You can see that the same model file(after I converted it from Collada to GLTF) is parsed with blue color!
Can you please tell me how can I load the color correctly? thanks in advance.

Answer 1

I looked at your geometry with console.log(child.geometry) and noticed that it doesn't have any normals data. It only has position, uv, & uv2, but you need normals to calculate the behavior of light reflecting from your faces.
There are 3 things you can do to solve this:
1 Add your own normals:
Re-export your Collada file with normals data from your 3D editor software.
2 Flat shading:
Use flat-shading so every face is flat, without smooth or rounded edges. You don't need normals data for this because the shader just assumes every triangle's normal is pointing perpendicular to its surface.
avatar.traverse(function (child) {
if (child.isMesh) {
child.material.flatShading = true;
}
});
3 Calculate normals:
You could ask Three.js to calculate the normals for you. Just be aware that it does this by averaging connected vertices, so faces might accidentally look too smooth or too hard in places you don't expect.
avatar.traverse(function (child) {
if (child.isMesh) {
child.geometry.computeVertexNormals();
}
});