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

tianyawhl

发布于 2020-12-08 10:41:34

3.1K0

发布于 2020-12-08 10:41:34

文章被收录于专栏：前端之攻略前端之攻略

在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);
      });
    },

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

文件存储