How to use GLTF Loader in three.js? Texture and material displaying as black

Question

I\'m having issues loading a gltf. The model is able to load successfully but all the textures and materials (already embedded in the .gltf) are completely black. When I view it

Answer 1

This issue is essentially the same as How to use AmbientLight in combination with MeshStandardMaterial? — your model has a 100% metallic material, and pure metals do not reflect diffuse (ambient and hemisphere) lights.

Ideally, always add an environment map to PBR models. Another solution is to add non-diffuse/direct lights, such as PointLight or DirectionalLight instances. If you are able to edit the model, reducing its metalness would also work.

For more details, see https://github.com/mrdoob/three.js/issues/9228.