Three.js加载.GLTF文件

本文主要对三维模型的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年又发布了GLTF2.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文件中

相关文章

1.https://blog.csdn.net/qq_25909453/article/details/78720380

2.glTF格式初步了解:https://blog.csdn.net/gamesdev/article/details/50494985

3.压缩为二进制，降低文件大小:https://www.jianshu.com/p/5cd9e2db3c20

4.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 );
} );

本文转载地址:我的个人技术博客