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

4
votes

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 in the gltfviewer, all the textures and materials show up correctly. I'm new to three.js so if anyone can walk me through using the GLTF loader, I would greatly appreciate it!!

1
three.js
Do you have any light source in the scene? – prisoner849
I believe so. If I add a phong material and set color to white, the black changes to white. – Ayma
What kind of lights? Can you share the model or a demo? Note that metallic materials may require an environment map. In the gltf viewer (gltf-viewer.donmccurdy.com) you can adjust direct and ambient light to see the effect. – Don McCurdy
thanks for replying. How do I share the model? I have the gltf uploaded on github... Also, its a hemisphere light (I just copied the code off another post); the light should be working though? Since I can see the material when I add a phong material with a white color. – Ayma
A link to the GitHub project may be enough. Otherwise, Google Drive, Dropbox, Gist, or some other file link. – Don McCurdy

1 Answers

6
votes

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.