three.js 加载glb格式模型的优点

之前已经加载过3D模型了，使用的是STL格式的，好处呢就是简单易学，对应的STL加载器加载模型文件，参数geometry ，打印的话只有顶点信息，是所有的顶点信息，没有face等模型局部操作，整个模型只能使用一种材质，老板期望的点击局部变色高亮几乎是无法实现。最后只能通过画线的方式解决，就是点击已知的模型特征区域的坐标，使用LineSegments等画线API对线段坐标进行绘制。但是又遇到之前在做测量时候的问题，浏览器大部分不支持画线加粗显示。幸好之前测量的时候考虑到太细，直接使用画圆柱体代替画线完美解决。在这里推荐一下通义千问和智普清言在开发加载模型的时候给了很大帮助。

加载GLB，主要是去看了某大厂的3D加载模型，点击发现有一串文件流的请求就试着复制下载，发现是GLB格式的，然后就在之前加载STL的地方，尝试着加载这个GLB格式的模型，首先实现的是点击模型局部。

还是和STL一样先引入glb加载loader,这里打印参数glft就可以明显发现和STL的不同，他里面存在多个child,若要实现独立变色不影响其他部分，在这里就要对每个child创建一个自己独有的材质信息，以便后期点击时候的变色高亮。

  // 创建一个新的材质实例
              let material = new THREE.MeshBasicMaterial({
                color: "#a59f97",
                transparent: true,
                opacity: 1,
                // metalness: 0.5, // 示例属性，根据需要设置
                // roughness: 0.5, // 示例属性，根据需要设置
                // ... 其他材质属性
              });

              // 替换原有的材质
              child.material = material;

 然后和STL点击事件一样也是通过射线相交的方式来确定点击的位置，由于模型的child是MESHl类型因此会相交多个，取最近的那一个也就是相交数组的第一个，需求是点记一个部位变色，点击下一个上一个回复原色，声明一个对象来存储变色前的颜色，点击下一个的时候判断这个是否存在，是否等于当前点击的不等于就回复记录的这个的颜色，改变现在的这个材质颜色，材质颜色用color属性，记录的颜色用originalColor这样就实现点击变色了。

之前不了解各种格式之间的区别在STL上各种尝试，脑细胞都废掉不少，换一种格式轻松实现老板需求，这种模型各部位独立的功能应对各种点击事件游刃有余。