How to specify a material for a gltf model

[idrisbrewster]

I have my gltf loaded and displaying on my site, however it is black. All of the code that I am seeing on the documentation shows me how to swap textures/materials, but none of them show me how to specify the texture as an image for my 3d model.

This seems like something that would only be a few lines of code. Can someone tell me how I can apply my texture image to my gltf model?

[elalish]

Your texture should already be part of your glTF (have you tried GLB?). Are there any errors/warnings in your JS console? How are you creating/exporting your glTF?

[idrisbrewster]

So i ended up making a GLB file, so the textures are already a part of the file (I tested the model on GLB viewers online). However, the model is still showing up as black. How can i change this?

[elalish]

Check your JS console and put up a link to your site so we can repro.

[idrisbrewster]

Here is what my js console says:

model-viewer.js:65177 Material Toussaint uses a deprecated extension
          "KHR_materials_pbrSpecularGlossiness", please use
          "pbrMetallicRoughness" instead. Specular Glossiness materials are
          currently supported for rendering, but not for our scene-graph API,
          nor for auto-generation of USDZ for Quick Look.

Here is the link to my site: https://moversandshakersnyc.webflow.io/about

I originally had an fbx and an external texture file, and I brought them into sketchfab to convert them to gltf, then I converted the gltf to glb so that everything is wrapped in one file

[elalish]

That's the warning, but you ignored the errors above it:

GET https://moversandshakersnyc.webflow.io/assets/NeilArmstrong.webp 404 (Not Found)
model-viewer.js:39557 GET https://moversandshakersnyc.webflow.io/shared-assets/environments/moon_1k.hdr 404 (Not Found)
model-viewer.js:54013 Uncaught (in promise) ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 24173, total: 0, type: 'load', …}

You copied over environment-image and poster without bringing their files. Since it couldn't find your environment, you have no light, hence the blackness. Delete those attributes and it should work.

[idrisbrewster]

that worked, thank you so much!