gltf格式的压缩文件在threejs中展示-GLB下载网(glbxz.com)gltf文件下载-glb格式下载-模型制作

最近更新：2024年5月17日

gltf格式的压缩文件在threejs中展示

11。

2023-11-28 小编已售22次关注11次

0.01金币年/月SVIP:0.008金币 该资源永久SVIP免费去升级

收藏 QQ咨询

特别声明：此网站模型都是glb模型下载，gltf文件下载，用于wed展示，有些可能有源文件fbx/obj/blend/3dmax，具体看正文说明，也可联系客服定做模型，网盘过期请用备用下载，提取码都是gltf，如模型加载不兼容，可用网站在线编辑功能，重新导出！GLB下载网(glbxz.com)gltf文件下载-glb格式下载-模型制作https://glbxz.com 充值金币

在H5中引入3D模型往往存在资源太大，可以通过模型网格压缩，通过glTF配合Draco压缩的方式，可以在视觉效果近乎一致的情况下，让3D模型文件成倍缩小

glTF在线查看器： https://gltf-viewer.donmccurdy.com

一、通过Draco进行压缩

Draco及gltf-pipeline的介绍

Draco是Google推出的一个用于3D模型压缩和解压缩的工具库，glTF资源可通过、Draco开发命令行工具gltf-pipeline进行编码压缩，gltf-pipeline可通过npm的方式安装使用，使用方法如下：

#全局安装

npm install -g gltf-pipeline

#压缩glb文件 -b表示输出glb格式， -d表示压缩

gltf-pipeline -i model.glb -b -d

#压缩glb文件并将纹理图片分离出来

gltf-pipeline -i model.glb -b -d -t

更多参数查阅

gltf-pipeline -h

二、实际操作流程（vue cli3 结构为例）

1、通过blender制作的模型导出test.glb文件，在public的文件夹内新建models文件夹，并放入test.glb文件，

通过命令行工具 gltf-pipeline -i test.glb -o test1.glb -d 则可以生成压缩后的test1.glb文件

2、把解码文件node_modules>three>examples>js>libs路径下的draco文件夹放到public文件夹下

3、代码实现

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import {CSS3DRenderer, CSS3DObject} from "three/examples/jsm/renderers/CSS3DRenderer.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader"
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader"

    initModel() {
      let gltScene;
      let gltfLoader = new GLTFLoader();
      let dracoLoader = new DRACOLoader();
      dracoLoader.setDecoderPath("draco/gltf/"); // 设置public下的解码路径，注意最后面的/
      dracoLoader.setDecoderConfig({ type: "js" });
      dracoLoader.preload();
      gltfLoader.setDRACOLoader(dracoLoader);

      gltfLoader.load("models/mynewtest.glb", gltf => {
        console.log(gltf);
        gltf.scene.position.set(0, 0, 0);
        this.scene.add(gltf.scene);
      });
    },

常见问题FAQ