背景

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件事情：

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

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

导出的时候压缩模型

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

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

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

ThreeJS FBXLoader 加载3D文件，材质消失，已解决
ThreeJS FBXLoader 加载3D文件,材质消失,已解决 ThreeJS FBXLoader 加载3D文件,材质消失直接贴代码 ThreeJS FBXLoader 加载3D文件,材质消失 ...
three.js 加载gltf模型的简化demo
目录前言下载依赖改造插件主要代码效果前言最近需要做一个three.js加载三维模型的,才发现three.js的官网和网上的示例挺乱的.甚至有人说把three.js的全部demo下载下来, ...
python加载模型_解决python 无法加载downsample模型的问题
downsample 在最新版本里面修改了位置 from theano.tensor.single import downsample (旧版本) 上面以上的的import会有error raise: ...
cesium加载 gltf模型
cesium加载 gltf模型首先自己配置一个iis环境 :http://www.xitongcheng.com/jiaocheng/win10_article_60912.html,其他环境比如 ...
Babylonjs 加载Gltf模型添加动画、点击事件、天空盒、标签
加载Gltf模型方法.模型点击事件.label标签.天空盒 import React, { useState, useEffect, useRef } from 'react' import TWEE ...
three.js加载obj模型和材质
1.Vue中安装three.js和加载用的包安装three.js使用npm install three --save 安装加载obj和mtl文件的包npm install three-obj-mtl ...
移植驱动完毕后加载时的version magic报错原因以及解决办法
History:2012-02-17 Author:yingru 移植rt3070的AP驱动到装有fedora14的PC机上时,模块编译完毕后,加载时提示invalid module format. ...
threejs加载C4D模型及材质渲染实例
最近在学习Threejs3D引擎使用,主要是为了实现web里面去实现3D模型的加载渲染,这样会比较直观的看到类似的效果,增加用户体验. 第一步:加载C4D模型.将模型和材质导出二.加载主要插件模块 ...
threejs学习--vue-cli集成threejs后，加载gltf模型FPS很低问题解决（四）
vue集成threejs后,web页面加载模型之后,FPS值在10以下:查阅资料是因为:声明的部分threejs的对象不可以放在data中:否则就会帧数特别低: 以下为修改之后代码 <templ ...

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

背景