【ThreeJS基础教程-高级几何体篇】2.4 GL格式(GLTF/GLB)模型讲解与其他常用模型格式介绍

GL格式（GLTF/GLB）模型讲解与其他常用模型格式介绍

• 学习ThreeJS的捷径
• GL格式简介
• 常见的建模软件
• ThreeJS支持的文件格式
• 常见的模型格式介绍
• • 模型兼容性说明
  • OBJ格式与MTL格式
  • FBX格式
  • STL格式
  • GLTF/GLB格式
• GL格式获取方式介绍
• • 官方建议下的各种转换工具
  • Blender软件
  • Babylon插件
  • • gltf-pipeline
• 其他插件
• ThreeJSEditor和Babylon模型沙盒
• 下一篇预告

学习ThreeJS的捷径

本段内容会写在0篇以外所有的，本人所编写的Threejs教程中

对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS

1. 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
2. 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
3. 上述案例不只是官 的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
   http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
   https://www.wellyyss.cn/ 跃焱邵隼
   http://www.wjceo.com/ 暮志未晚
   这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处

GL格式简介

GL格式一般是指 gltf格式和glb格式

gltf格式可以直接使用记事本打开，打开后，实际显示的文本为json格式
glb格式是gltf格式的二进制版

GL格式更有利于在前端中使用，前端对json的支持也好，本身文件大小比obj等格式要小一些也好，都更有利于在WebGL项目中使用

在笔者的三年多开发生涯中，GL格式也是最友好以及兼容性最好的格式

常见的建模软件

3DS Max，Maya，Cinema 4D(C4D)，Blender，ZBrush，SketchUP等等
关于上述这些建模软件，根据个人需要去做了解即可

笔者这里合作最多的建模师的建模软件为3DS Max

合作的最优建模软件为Blender，Blender是笔者截止到目前唯一一个内置就支持GL格式的建模软件，导出来的gl格式模型与threejs的兼容性也非常的高，很难出现不兼容的问题

ThreeJS支持的文件格式

以下为笔者根据threejs/examples做的模型格式统计
3dm，3ds，3mf，amf，bvh，collada（dae），fbx，nurbs，gcode，gltf，glb，ifc，kmz，ldraw，lwo，md2，mdd，mmd，nrrd，obj，mtl，pcd，pdb，ply，prwm，stl，svg，tilt，ttf，vox，vrml，vtk，xyz

笔者目前接触过的格式
fbx，gltf，glb，obj，mtl，stl
下文将围绕这几种格式做介绍

常见的模型格式介绍

模型兼容性说明

无论你用再强大的建模软件，用再厉害的模型格式，也无法做到100%兼容，任何格式都有其对应引擎，软件的兼容性，兼容性好坏直接决定你这个引擎使用什么格式

这里笔者仅推荐使用GL格式，GL格式毫无疑问是threejs最适合的格式，用过的都说好

但是也不是说其他格式就不能用，根据你的使用情况，对兼容性的处理也有一定的改善，比如说你常年和FBX文件打交道，那么当你打交道几年后，你肯定也能对FBX格式烂熟于心，肯定能第一时间找到解决FBX兼容问题的方法

评价等级：极差，差，适中，较好，良好，极佳，完美

OBJ格式与MTL格式

obj格式是对新手最友好的格式，可以说整个新手期可以全程使用这个格式，待正式项目后，再学习gl格式的使用也不晚

FBX格式

这是让笔者最为痛苦的一种文件格式。。。

一些碎碎念，笔者在学习threejs早期，为了解决obj格式不能带动画的问题，去尝试了dae格式，3ds格式，还有fbx格式，最终选用了fbx格式为最终使用格式，但是，在后来在其他地方获取到了模型之后，发现，fbx格式的模型出现了材质问题，以及破面碎面问题，紧接着，笔者又在和群里人交流的过程中，协助对方检查带有骨骼的fbx格式模型文件的问题时发现，骨骼模型又出现了材质错误和坏面等问题。。。在接触threejs的第二年末，因公司需求，再次与fbx格式打交道，因公司提出需要将模型放置到中心这样的需求，笔者经过多次尝试，一而再再而三的出现，这个模型能居中了，另一个模型又不行了，用包围盒居中，改数据什么的，很多居中对gl格式有效但是对fbx格式的文件无效种种情况。。。最终让笔者彻底放弃fbx格式

STL格式

如果你的项目的模型，不使用贴图仅使用单色的情况下，STL是一种非常优秀的格式，笔者在这里仅在一个医疗项目上使用，用不同的颜色去标记不同的器官模型，这时STL这种仅加载geometry的方式，就比较适合了

GLTF/GLB格式

GL格式获取方式介绍

官方建议下的各种转换工具

官方关于载入3D模型的说明

Babylon插件

在babylonjs的官方文档中，提供了一些获取gltf格式的方式
https://doc.babylonjs.com/features/featuresDeepDive/Exporters

其中，笔者最常用的，就是这款3dmax的插件，这款插件可以直接将做好的max文件转换为gltf格式的文件
https://doc.babylonjs.com/features/featuresDeepDive/Exporters/3DSMax_to_glTF

具体用法参考上述插件官 ，那里介绍的更详细

关于Draco压缩后续的文章中会讲到

其他插件

笔者接触过obj2gltf，以及fbx2gltf等插件，这些插件均可以将对应的文件转换为gltf格式，但是，这些插件多少都有些问题，尤其是fbx文件，fbx文件版本多，兼容性不稳定，这里笔者仅提一下这两个插件，不推荐使用

ThreeJSEditor和Babylon模型沙盒

ThreeJSEditor官

下一篇预告

下一篇主要讲解如何加载GL格式模型，加载Draco压缩后的GL格式模型，以及分享一些笔者的一些开发经验