Three.js 加载 .GLTF 文件

Question

本文主要对三维模型的 GLTF 格式进行介绍，然后讲解如何通过 Threejs 加载 .GLTF 格式模型文件。

GLTF 格式是新 2015 发布的三维模型格式，随着物联网、WebGL、5G 的进一步发展，会有越来越多的互联网项目Web端引入 3D 元素，你可以把 GLTF 格式的三维模型理解为 .jpg、.png 格式的图片一样，现在的网站，图片基本是标配，对于以后的网站来说如果需要展示一个场景，使用 3D 来替换图片表达也是很正常的事情。

图片有很多格式，对于三维模型自然也是如此，Web开发的时候图片会有常用格式，对于 Web3D 开发也一样，肯定会根据需要选择一个常见的大家都熟悉的格式，随时时间的发展，GLTF 必然称为一个极为重要的标准格式。

GLTF 2.0

Khronos Group 组织 2015 发布了 GLTF 1.0 版本，在 2017 年又发布了 GLTF 2.0 的版本。

关于 glTF 的更多介绍和信息，可以查看 github：https://github.com/KhronosGroup/glTF

导出或转 glTF 格式

在实际项目中如果你想导出glTF格式，比如你使用的是 3dmax、Blender 等建模软件，绘制好模型后，需要导出 glTF 格式，这时候可以找一些开源的插件达到目的，具体的可以参考github关于glTF的介绍 glTF Tools

如果你想把obj等格式转化为glTF，通用可以找一些开发的程序或工具来实现，可以查看 github 关于 glTF 的介绍 glTF Tools

格式信息

如果你对三维模型的格式有一定的了解，你应该指导不同的三维模型格式能够包含的模型信息是不同的，比如 .stl 格式、.ply 格式可以保存几何体顶点信息，但是没有材质信息；对于 obj 格式而言无法保存模型的动画信息，无法保存场景中的光源信息，也无法保存相机信息。对于 GLTF 而言，可以像FBX格式一样保存模型的材质、几何体信息，骨骼、变形动画数据，光源信息，相机信息，甚至自定义的着色器代码，也就是说GLTF基本上可以保存所有你想保存的三维场景信息。

一个 scene.gltf 文件案例的代码，你可以看到GLTF文件是通过 JSON 的键值对方式来表示模型信息，比如 meshes 表示网格模型信息，materials 表示材质信息...

{
  "asset": {
    "version": "2.0",
    "generator": "THREE.GLTFExporter"
  },
  "scenes": [
    {
      "nodes": [0],
      "name": "AuxScene"
    }
  ],
  "scene": 0,
  "nodes": [
    {
      "name": "Sphere",
      "mesh": 0
    }
  ],
  "bufferViews": [
    {
      "buffer": 0,
      "byteOffset": 0,
      "byteLength": 1452,
      "target": 34962,
      "byteStride": 12
    },
    {
      "buffer": 0,
      "byteOffset": 1452,
      "byteLength": 1452,
      "target": 34962,
      "byteStride": 12
    },
    {
      "buffer": 0,
      "byteOffset": 2904,
      "byteLength": 968,
      "target": 34962,
      "byteStride": 8
    },
    {
      "buffer": 0,
      "byteOffset": 3872,
      "byteLength": 1080,
      "target": 34963
    }
  ],
  "buffers": [
    {
      "byteLength": 4952,
      "uri": "data:application/octet-stream;base64,AAAAgAAAjEIAAAAAAAAAgAA...."
    }
  ],
  "accessors": [
    {
      "bufferView": 0,
      "componentType": 5126,
      "count": 121,
      "max": [70,70,66.57395935058594],
      "min": [-70,-70,-66.57395935058594],
      "type": "VEC3"
    },
    ...
    }
  ],
  "materials": [
    {
      "pbrMetallicRoughness": {
        "baseColorFactor": [1,1,0,1],
        "metallicFactor": 0.5,
        "roughnessFactor": 1
      }
    }
  ],
  "meshes": [
    {
      "primitives": [
        {
          "mode": 4,
          "attributes": {
            "POSITION": 0,
            "NORMAL": 1,
            "TEXCOORD_0": 2
          },
          "indices": 3,
          "material": 0
        }
      ]
    }
  ]
}

.bin 文件

有些glTF文件会关联一个或多个.bin文件，.bin文件以二进制形式存储了模型的顶点数据等信息，更多介绍可以参考文章：https://blog.csdn.net/Neil3D/article/details/79903126。

二进制文件 .glb

你可以通过任意一款代码编辑器打开.glTF格式文件，查看里面的JSON键值对，因为.glTF是文本格式文件。.glb是.glTF的二进制格式，如果.glTF表示的一个模型文件有纹理贴图，问法力贴图图片是一个单独的文件，比如.png格式表示的一张图像，如果.glTF打包转化.glb文件，一些纹理图片等单独的文件都会以二进制的形式打包存储到一个.glb文件中

相关文章

• https://blog.csdn.net/qq_25909453/article/details/78720380
• glTF 格式初步了解：https://blog.csdn.net/gamesdev/article/details/50494985
• 压缩为二进制，降低文件大小：https://www.jianshu.com/p/5cd9e2db3c20
• gltf二进制glb文件：https://yivian.com/news/51717.html

Three.js 解析加载 .gltf 文件

可以查看官方的案例：webgl_loader_gltf.html

<!-- 引入加载器GLTFLoader.js -->
<script src="./threejs/examples/js/loaders/GLTFLoader.js"></script>

// 创建GLTF加载器对象
var loader = new THREE.GLTFLoader();
loader.load( 'gltf模型.gltf', function ( gltf ) {
  console.log('控制台查看加载gltf文件返回的对象结构',gltf)
  console.log('gltf对象场景属性',gltf.scene)
  console.log('gltf对象相机属性',gltf.cameras)
  // 返回的场景对象gltf.scene插入到threejs场景中
  scene.add( gltf.scene );
})

官方案例：webgl_materials_modified.html

// 创建GLTF加载器对象
var loader = new THREE.GLTFLoader();
loader.load( 'glb格式模型.glb', function ( gltf ) {
  var mesh = new THREE.Mesh( gltf.scene.children[ 0 ].geometry, material );
  mesh.position.y = - 50;
  mesh.scale.setScalar( 100 );
  scene.add( mesh );
} );