donmccurdy / three-gltf-viewer

Drag-and-drop preview for glTF 2.0 models in WebGL using three.js.
https://gltf-viewer.donmccurdy.com/
MIT License
2.06k stars 530 forks source link

glb model render error #333

Closed neciszhang closed 1 year ago

neciszhang commented 1 year ago

glb model : https://sketchfab.com/3d-models/female-thief-b244510c12f8420d8c3da7e9a426b5d6 When I put it in gltf viewer.It's render image

donmccurdy commented 1 year ago

This models has two problems:

  1. It uses the spec/gloss PBR workflow, which three.js no longer supports. You'll need to convert it to a metal/rough PBR workflow.
  2. Every material on this model uses alpha blending, which is going to cause other problems.

Both of these issues can be fixed by loading the model in https://gltf.report, clicking "OK" at the prompt to convert the materials, and then running the script below in the script tab:

for (const material of document.getRoot().listMaterials()) {
    material.setAlphaMode('OPAQUE');
}

After that you may want to do more cleanup on the hair and sunglasses, to make them alpha blended or alpha masked, but those changes would be best done in a tool like Blender.

neciszhang commented 1 year ago

Thanks a million!