解决 Threejs 无法加载 GLTF 模型的材质，报错 Unknown extension “KHR_materials_pbrSpecularGlossiness

背景

threejs 的版本是 0.147.0。使用 GLTFLoader 加载 GLTF 模型文件发现材质（Material）没有显示。

打开开发者工具发现有 Warning：THREE.GLTFLoader: Unknown extension "KHR_materials_pbrSpecularGlossiness"

解决方案

降级

另外一个工程使用了 Threejs 的 0.126 版本，可以正常显示。但具体到哪个版本缺少支持没有做认证。

修改模型文件

打开 gltf.report 网站。打开模型文件，会弹框提示，不支持 KHR_materials_pbrSpecularGlossiness，会把材质转换成 metal/rough（即这个办法的原理就是把不支持的材质类型转换成支持的，副作用就是缺失一些特性）。

点击确定，可以看到材质是可以加载的。

再点击右边的 export，保存成新的 gltf/glb 文件，再使用 threejs 加载新的模型文件就可以正常显示了。

扩展

KHR_materials_pbrSpecularGlossiness 是什么？

定义：KHR_materials_pbrSpecularGlossiness 是一个GLTF材质扩展。
规范文件：https://github.com/KhronosGroup/glTF/blob/main/extensions/2.0/Khronos/KHR_materials_specular/README.md

从规范文件知道，这个扩展主要是给 metallic-roughness 模型添加两个参数：specular和specularColor。
metallic-roughness 模型是一种物理式渲染(physically based rendering,PBR)材质模型。

扩展阅读：

• glTF（二）：PBR

gltf.report 的其他用处

gltf.report 使用了 glTF-Transform 库，这个库和网站都是同一个作者。

优化模型

点击右上角的 Run，就会执行其中的代码，里面的代码做了4件事情：

1. 去除重复的顶点和贴图数据
2. 重采样动画
3. 去除无用的 nodes 和贴图以及其他数据
4. 把贴图缩放到 1K 以下

后面可以根据 gltf-transform 的库进行相关处理。

导出的时候压缩模型

在右侧的 Export 菜单上，在 compression 选项可以选择使用 Draco、 Meshopt的压缩方式。

如果在 Threejs 里面使用，压缩后的模型不能直接用 GLTFLoader 加载，需要添加对应的扩展。比如使用了 Draco 后，参考：DRACOLoader。