【Three.js】导出.GLTF和.GLB格式模型

glTF (GL传输格式)是一种用于有效传输和加载3D内容的开放格式规范。可以以JSON (.gltf)或二进制(.glb)格式提供。外部文件存储纹理(.jpg， .png)和额外的二进制数据(.bin)。一个glTF可以保存一个或多个场景，包括网格、材质、纹理、皮肤、骨骼、变形目标、动画、灯光和/或相机。

说人话：就是导出后节省资源和加载速度快，比如需要加载人员模型或者大型场景模型，在Three中加载gltf和glb的模型确实快很多，比如加载一个人物模型4M Fbx 明显感觉卡顿一下，而用gltf和glb就不卡顿。

 这里Three用的是r142

制作思路：

 

1.加载模型。我用的是OBJ模型 官网API：https://threejs.org/docs/index.html?q=OBJLoader#examples/zh/loaders/OBJLoader

2.给模型贴上透明材质。连同材质会一起导出，如果不想导出材质就不设置材质

4.使用GLTFExporter生成GLTF或GLB格式数据。官网API：https://threejs.org/docs/index.html#examples/zh/exporters/GLTFExporter

5.使用HTML5 Blob进行下载。

直接上代码：

    createOBJ() {
      const that = this;
      // 建筑面材质
      let buildMaterial = new THREE.MeshBasicMaterial({
        color: "#009EFF",     // 颜色
        transparent: true,    // 是否开启使用透明度
        opacity: 0.25,        // 透明度
        depthWrite: false,    // 关闭深度写入 透视效果
        side: THREE.DoubleSide, // 双面显示
      });

      // 建筑线材质
      let lineMaterial = new THREE.LineBasicMaterial({
        color: "#36BCFF",
        transparent: true,
        opacity: 0.4,
        depthWrite: false,
        side: THREE.DoubleSide,
      });

      const loader = new OBJLoader(); //引用加载obj模型组件
      loader.load(
          'data/models/light.obj',
          function (object) {
            object.scale.set(0.1, 0.1, 0.1);  // 设置模型缩放
            object.traverse((e) => {              // 遍历模型中所有mesh
              e.material = buildMaterial;             // 赋模型材质
              if (e.geometry) {
                const edges = new THREE.EdgesGeometry(
                    e.geometry
                );
                const line = new THREE.LineSegments(
                    edges,
                    lineMaterial                      // 赋线条材质
                );
                object.add(line);                     // 把每一个mesh生成的线条添加到场景中
              }
            });
            that.scene.add(object);                        // 添加到场景中

            // 导出
            that.exporter({
              input:object,
            })
          },
          function (xhr) {
            console.log((xhr.loaded / xhr.total * 100) + '% 加载进度');
          },
          function (error) {
            console.log("错误，检查你的模型路径是否准确，模型是否存在！", error);
          }
      );
    },


    /**
     * gltf和glb导出器
     * @param option
     */
    exporter(option) {
      const gltfExporter = new GLTFExporter();
      const options = {
        trs: option.trs == null ? false : option.trs, //导出位置、旋转和缩放，而不是每个节点的矩阵 默认是false
        onlyVisible: option.onlyVisible == null ? true : option.onlyVisible, //只导出可见的对象 默认是true
        truncateDrawRange: option.truncateDrawRange == null ? true : option.truncateDrawRange,
        binary: option.binary == null ? false : option.binary, //binary==true 导出glb | binary==false 导出gltf
        forceindices: option.forceindices == null ? false : option.forceindices, //为非索引几何图形生成索引并导出它们 默认false
        maxTextureSize: 4096, //限制图像的最大尺寸（宽度、高度）为给定值。默认是无限
      };
      gltfExporter.parse(
          [option.input], //这是个数组
          function (result) {

            if (result instanceof ArrayBuffer) {

              save(new Blob([result], {type: 'application/octet-stream'}), 'scene.glb');

            } else {

              const output = JSON.stringify(result, null, 2);
              save(new Blob([output], {type: 'text/plain'}), 'scene.gltf');

            }

          },
          function (error) {

            console.log('An error happened during parsing', error);

          },
          options
      );

      const link = document.createElement('a');
      link.style.display = 'none';
      document.body.appendChild(link); // Firefox workaround, see #6594

      function save(blob, filename) {

        link.href = URL.createObjectURL(blob);
        link.download = filename;
        link.click();

      }

    },

ps：

1.需要引用THREE、GLTFExporter、OBJLoader。没人不会引用这个吧？应该没人吧！！

这是我本地引用的：

import THREE from "three";
import {GLTFExporter} from "@/plugins/three.js-r142/examples/jsm/exporters/GLTFExporter";
import {OBJLoader} from "@/plugins/three.js-r142/examples/jsm/loaders/OBJLoader";

2.运行之后自动下载 

 3.加载GTTF和GLB使用，可自行查看官网API

    const gltfLoader = new GLTFLoader()
    const dracoLoader = new DRACOLoader()
    dracoLoader.setDecoderPath(option.dracoUrl)
    gltfLoader.setDRACOLoader(dracoLoader)
    gltfLoader.load(option.url, option.onLoad, option.onProgress, option.onError)