How do I get the materials to load on my 3d model?

Questions
,
1

On my localhost my 3d models appears all black but it does not do the same when I test it in the gltf loader. How do I fix this?
Here is my code:
https://codesandbox.io/p/github/semtexk/closet-demo/main?file=%2Fsrc%2Fcomponents%2FExperience.jsx%3A1%2C1&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clnky22gy0007356ijaquxpdu%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clnky22gy0003356ijd66bd9d%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clnky22gy0005356ioz0mnjlf%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clnky22gy0006356iba4ub5zo%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clnky22gy0003356ijd66bd9d%2522%253A%257B%2522id%2522%253A%2522clnky22gy0003356ijd66bd9d%2522%252C%2522activeTabId%2522%253A%2522clnkyb1z000fp356io7df6b8j%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clnky22gy0002356imypw7irw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2520(DELETED)%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%252C%257B%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Fcomponents%252FExperience.jsx%2522%252C%2522id%2522%253A%2522clnkyb1z000fp356io7df6b8j%2522%252C%2522mode%2522%253A%2522temporary%2522%252C%2522state%2522%253A%2522IDLE%2522%257D%255D%257D%252C%2522clnky22gy0006356iba4ub5zo%2522%253A%257B%2522id%2522%253A%2522clnky22gy0006356iba4ub5zo%2522%252C%2522activeTabId%2522%253A%2522clnky2fij00bz356ie9zcewzt%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522id%2522%253A%2522clnky2fij00bz356ie9zcewzt%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clnky22gy0005356ioz0mnjlf%2522%253A%257B%2522id%2522%253A%2522clnky22gy0005356ioz0mnjlf%2522%252C%2522activeTabId%2522%253A%2522clnky2c2d00ad356i8wiu27yw%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clnky22gy0004356iqkh2vmro%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clnky22lb000oe6f89pq245de%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522clnky2c2d00ad356i8wiu27yw%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

2

Have you used the tags for lights?

1 Like
3

you’re missing light indeed. other than that, gltf is not fit for the web, use glb. type

npx gltfjsx yourmodel.gltf --transform

and it will reduce it down up to 95%.

2 Likes