【ThreeJS基础教程-高级几何体篇】2.5 加载GLTF/GLB格式文件，Draco压缩文件的获取与加载

已于 2022-10-26 13:01:59 修改
阅读量1.4k 收藏 9
点赞数
分类专栏： Threejs基础教程 文章标签： javascript 前端
于 2022-10-26 12:59:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42760477/article/details/127528622
版权

加载GLTF/GLB格式文件，Draco压缩文件的获取与加载

学习ThreeJS的捷径

本段内容会写在0篇以外所有的，本人所编写的Threejs教程中

对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久

如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS

  1. 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
  2. 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
  3. 上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
    http://www.yanhuangxueyuan.com/ 郭隆邦技术博客
    https://www.wellyyss.cn/ 跃焱邵隼
    http://www.wjceo.com/ 暮志未晚
    这三个站点是我最常逛的站点，推荐各位有事没事逛一下，看看他们的案例和写法思路，绝对没坏处

加载GL格式模型

案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";
    import {GLTFLoader} from "../../three.js-master/examples/jsm/loaders/GLTFLoader.js";

    let scene,renderer,camera,orbitControls;

    let loader;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,50000);
        camera.position.set(10,10,10);
        orbitControls = new OrbitControls(camera,renderer.domElement);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);

        scene.background = new THREE.Color("#878787");

        loader = new GLTFLoader();
    }

    function addMesh(){
        loader.load("./SimpleSkinning.gltf",(gltf)=>{
            console.log(gltf);
            scene.add(gltf.scene);
        });

        loader.load("./Parrot.glb",(glb)=>{
            console.log(glb);
            let model = glb.scene;
            model.scale.setScalar(0.1);
            model.position.y += 3;
            scene.add(model);
        })

        loader.load("./glTF/MaterialsVariantsShoe.gltf",(gltf)=>{
            scene.add(gltf.scene);
            let model = gltf.scene;
            model.position.z = 3;
            model.scale.setScalar(10);
        })
    }


    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }

    init();
    addMesh();
    render();
</script>
</body>
</html>

在这里插入图片描述
以上模型文件均可在官方开发包 examples/models/gltf/ 文件夹下找到

案例效果

在这里插入图片描述

threejs中常见的模型加载方式

本次案例和前面的OBJLoader的案例几乎一致，仅仅将OBJLoader替换为了GLTFLoader，其他格式的文件也均以这样的方式加载

  1. 引入对应的Loader文件
  2. 读取模型后对加载完成后的模型对象执行一次console，在console中展开并分析其内部数据，并找到对应的Object3D对象或geometry
  3. 如果读取到的是geometry，需要你手动指定材质并手动创建mesh，如果读取到的直接是一个object3D对象，可以直接添加到scene中，如果读取到的是一组数据，那么我们需要先分析数据后再执行加载

在这里插入图片描述

在console中，我们可以看出，gl文件均由这几部分构成

属性名值类型属性说明
animationsTHREE.AnimationClip模型导出时，可以选择将动画烘焙好之后，保存到模型中，gl格式读取完成后，读取到的动画就是这个，本篇暂时不谈这个对象，在后续动画部分会着重讲解
assetObject一个对象，记录了gltf的版本号以及导出方式
cameras[THREE.Camera]相机数组，用于读取模型内的相机
parserGLTFParser格式转换器，可以无需关注
sceneTHREE.Group/Object3D/Scene这里就是主要的模型数据，可以被添加到scene中
scenes[THREE.Group/Object3D/Scene]场景数组，一个模型可能包含有多个场景时可以用到
userDataObject用于保存用户数据的对象

所以我们在加载完成模型后，只需要把gltf.scene作为模型对象添加到scene中即可

     //直接添加到场景中
	 scene.add(gltf.scene);

	 //或做了处理后添加到场景中
     let model = glb.scene;
     model.scale.setScalar(0.1);
     model.position.y += 3;
     scene.add(model);
	 
	 //先添加与先处理没有区别，只要你能访问到这个对象即可
	 scene.add(gltf.scene);
     let model = gltf.scene;
     model.position.z = 3;
     model.scale.setScalar(10);

因为三个模型比例区别较大，所以笔者对三个模型的大小做了基本处理

三种常见的gl格式文件

一般来说，gl文件有三种，单独的一个gltf文件+贴图文件，glb文件+贴图文件，gltf + bin + 贴图文件，贴图文件均为非必须，根据建模师是否在建模过程中使用贴图而定

三种文件没有本质上的区别，只是gltf+bin更详细一些，数据更容易读懂，glb更方便使用一些，一般glb文件可以将贴图文件也附带到这一个文件中

Draco压缩

Draco介绍

太长了，各位看看这篇博主的文章吧，Draco库简析，没兴趣的做个了解即可，有兴趣的可以深入研究一下Draco算法

Draco在threejs中最实用的点就是压缩模型，以笔者的使用经验来说，Draco至少可以将模型压缩到10%甚至更小，文件越大压缩率越高，比如说我一个50M的中高模型，使用Draco技术能压缩到差不多5M甚至更小，但是如果我一个5M的模型，压缩后差不多能到2M这样

Draco使用过程中的常见误区

  1. Draco压缩，可以把文件大小压下来，但是笔者在使用过程中也出现了不少次的坏面破面，不同的模型执行压缩的情况，均有不同
  2. 不要仗着Draco能大幅压缩文件，就可以随意上高精度模型，Draco压缩只能缩小文件大小，不但不能降低你程序的内存占用，反而会提升你的CPU使用率和一定的内存占用，如果你的模型大小在你的带宽承受范围内，已经达到了一个比较流畅的情况，此时就可以不用Draco压缩

如何获取Draco模型

gltf-pipeline

https://github.com/CesiumGS/gltf-pipeline
这个插件在上一篇【ThreeJS基础教程-高级几何体篇】2.4 GL格式(GLTF/GLB)模型讲解与其他常用模型格式介绍中已经提到，当你的环境中已经有了gltf-pipeline之后，babylon插件在导出gltf模型的时候，就会增加压缩模型的选项
在这里插入图片描述
这个插件也可以单独使用

安装该插件,建议安装到全局\

	npm install -g gltf-pipeline

使用时，在模型的文件夹下，shift+右键打开powershell来使用即可
转换gltf和glb文件

	gltf-pipeline -i model.gltf -o model.glb
	
	gltf-pipeline -i model.gltf -b
	
	gltf-pipeline -i model.glb -o model.gltf
	
	gltf-pipeline -i model.glb -j

draco压缩

	gltf-pipeline -i model.gltf -o modelDraco.gltf -d

其他用法可以去github查看

Draco使用案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas{
            display: block;
        }
        body {
            margin: 0;
            overscroll-behavior: none;
        }
        #btns{
            position: absolute;
            top:10%;
            width: 500px;
            height: 100px;
            left: 50%;
            transform:translateX(-50%);
        }
    </style>
</head>
<body>
<div id="btns"></div>

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

<script type="importmap">
			{
				"imports": {
					"three": "../../three.js-master/build/three.module.js"
				}
			}
		</script>
<script type="module">
    import * as THREE from '../../three.js-master/build/three.module.js';
    import {OrbitControls} from "../../three.js-master/examples/jsm/controls/OrbitControls.js";
    import {GLTFLoader} from "../../three.js-master/examples/jsm/loaders/GLTFLoader.js";
    import {DRACOLoader} from "../../three.js-master/examples/jsm/loaders/DRACOLoader.js";

    let scene,renderer,camera,orbitControls;

    let loader,dracoLoader;

    function init(){
        scene = new THREE.Scene();
        renderer = new THREE.WebGLRenderer({
            antialias:true
        });
        renderer.setSize(window.innerWidth,window.innerHeight);
        document.body.appendChild(renderer.domElement);
        camera = new THREE.PerspectiveCamera(60,window.innerWidth/window.innerHeight,0.1,50000);
        camera.position.set(5,5,5);
        orbitControls = new OrbitControls(camera,renderer.domElement);

        let helper = new THREE.AxesHelper(5);
        scene.add(helper);

        let light = new THREE.PointLight();
        camera.add(light);
        scene.add(camera);

        scene.background = new THREE.Color("#878787");

        dracoLoader = new DRACOLoader().setDecoderPath("../../three.js-master/examples/js/libs/draco/gltf/");

        loader = new GLTFLoader().setDRACOLoader(dracoLoader);
    }

    function addMesh(){
        loader.load("./dracoModel/IridescentDishWithOlives.glb",(glb)=>{
            console.log(glb)
            scene.add(glb.scene);
            glb.scene.scale.setScalar(10);
        })
    }


    function render(){
        renderer.render(scene,camera);
        requestAnimationFrame(render);
    }

    init();
    addMesh();
    render();
</script>
</body>
</html>

案例效果

在这里插入图片描述

这里使用的模型为examples/models/gltf/IridescentDishWithOlives.glb，这个模型为官方案例所使用的模型

加载Draco常见错误处理方法

  1. 注意引用路径是否正确，draco有一个专门的解压文件库的路径，里面包含了四个文件，如果你使用的是ES6的引入方式，在jsm的文件夹下是找不到的，文件在这个位置：

在这里插入图片描述

  1. 检查你的文件是否执行过draco压缩，一般来说，windows自带的模型查看器直接可以打开gltf/glb文件，但是不能直接打开draco压缩后的gltf/glb，可以通过这个判断你的模型是否经历过draco压缩

  2. 使用threejs/editor或babylon模型沙盒检查模型是否可以被加载出来，如果这个模型在这两个编辑器内无法被加载出来，那么在你的程序中也依然无法加载，需重新处理模型

如果加载模型时未报错，请查看笔者前面的文章【ThreeJS基础教程-高级几何体篇】2.2 加载模型，加载模型时的常见错误

下一篇预告：

BufferGeometry介绍

幻梦丶海炎
关注
  • 0
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Threejs实现glb三维模型的预览
web13595805947的博客
02-23 1458
本文重点介绍如何基于Threejs对glb三维模型进行预览，关于threejs和三维建模等不在本文讨论之内，想详细了解threejs和glb三维模型的，请自行百度学习。 言归正传，使用threejs进行三维模型展示，通常需要依赖以下组件： Threejs+OrbitControls+GLTFLoader+WebGL 以上组件可以从threejs的官网获取，下载后的目录如下所示： 第一步、创建html，引入相关的js资源，代码如下： <html lang="en"> <head>
【threejs教程6】threejs加载glb模型文件（小米su7）
最新发布
c_wengy的博客
04-22 1898
在threejs中我们经常需要引入外部模型文件，本文将演示如何加载外部glb模型文件，以小米su7模型为例，本文只做简单加载和车轮动画。更多功能将在后面文章中讲解。如需要模型文件资源可站内私信。
Threejs加载城市obj模型，加载人物gltf模型，Tweenjs实现人物根据规划的路线运动
左本Web3D
07-07 3568
1，介绍： 该示例使用的是 r95版本Three.js库。在上一个案例（文章首页可查找）基础上添加城市模型（obj格式)，添加人物模型（gltf格式），初始化运动路线，这里使用了Tween.js实现的动画，人物模型按照路线进行运动。添加坐标轴。效果图如下： 2，主要说明 Three.js加载模型文件，并从中导入几何体。Three.js所支持的模型文件格式：json、obj/mtl、dae、ply、gltf、glb、svg、pbd...，这里说的都是扩展名，还有好多种这里不列举了。如果想加载.
vue使用three.js 加载glb，gltf，obj，并做点击处理
weixin_49346785的博客
05-07 4424
three文档：Three.js电子书《Three.js零基础入门教程》_郭隆邦 先看代码 template> <div class="three" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)"> <!-- 检查站模型 -->
threejs3加载模型
—巨人绿
10-18 415
import {WebGLRenderer,PerspectiveCamera, Scene, AxesHelper,SphereGeometry, HemisphereLight,MeshBasicMaterial,MeshPhongMaterial, Mesh,DoubleSide}from "three" import{OrbitControls}from "three/examples/jsm/controls/OrbitControls" import{MTLLoader}from "three/
ThreeJs在一次加载过程中，将各个不同的对象进行分开操作
m0_56522868的博客
06-02 1282
three.js实战技术交流
加载gltf-pipeline压缩后的gltf文件所需的js文件
03-23
gltf-pipeline对gltf文件进行压缩，压缩后的文件加载时需要专门的接压缩算法，这里面的js就是！包括： draco_decoder.js draco_decoder.wasm draco_encoder.js draco_wasm_wrapper.js
threejs测试文件格式汇总
12-05
这个“threejs测试文件格式汇总”集合了多种3D模型文件格式，包括 obj、gltf、glb、pcd、nrrd 和 3ds，这些都是在Three.js 中常见的加载对象格式。下面我们将详细探讨这些格式的特点和它们在Three.js 中的应用。 1....
Three.js项目，解压 glb / gltf 的功能代码文件
04-12
在Three.js项目中，加载压缩后的 glb / gltf 文件，解压后名称为 draco，直接复制文件夹，粘贴到项目中的public使用。 具体使用： 1、创建一个新的Draco实例 const dracoLoader = new DRACOLoader(); 2、设置 ...
obj模型批量转gltf/glb格式
03-02
使用obj2gltf开源库加上自己写的批处理脚本，可以同时将多个obj文件或者装有obj文件的文件夹转化为gltf或者glb格式。 https://blog.csdn.net/qq_37411242/article/details/129286233
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作
08-24
threejs操作glb，gltf格式3D模型案例，包含点击部位高亮操作，控件提示等，也可直接引入到vue项目中使用
gltf/glb/osgb/fbx三维模型浏览器转换器（gltf/glb模型读写及蒙皮、fbx动画、osgb、x模型浏览和转换）
08-01
一款超轻量级、支持几十种三维模型格式的轻量级模型浏览器，目前支持windows版，支持gltf/glb模型及三维动画、蒙皮、fbx动画、osgb、x等几十种模型浏览和简单转换。可保存gltf、glb、osg、fbx、obj、3ds等格式。实现...
three.js读取选择的电脑中文件模型 glb
qq_32319999的博客
06-07 553
1 github下载three.js源码 2 源码目录随便创建一个html <!DOCTYPE html> <html lang="en"> <head> <title>three.js webgl - glTF 2.0 - compressed</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-
three.js加载3d模型_Blender体验3D建模UV贴图导入至ThreeJS
weixin_39951112的博客
11-24 1653
回想起2017年初识Blender，被他的开源所吸引，而且Blender每发布一个新版本都会随之放出一段影片，用于测试新版本功能。上个月Blender发布2.8Beta版，最为明显的是用户界面的改变。迫不及待上手新版blender3D建模与UV贴图。上面这个卫星3D模型是我在2017年期间为某项目制作的，当时就是使用Blender做的建模和贴图。这个模型将和THREEJS配合用于在Web端呈现。上...
three.js渲染带动画的glb文件（内附源码，保姆级）
weixin_44275686的博客
07-22 5174
three.js渲染带动画的glb文件，本文将一步步的带你把一个带动画效果的glb文件渲染出来
three.js 渲染带动画的glb模型
m0_69210482的博客
07-10 402
【代码】three.js 渲染带动画的glb模型。
vue使用three.js实现外部加载模型的自动缩放的效果
菜鸟karroy
06-12 3372
效果图： 具体实现的步骤： 1、新建文件 在src中创建views文件夹，在views中创建scale文件夹。在scale中创建components文件夹和index.vue文件，最后在components创建ModelScale.vue文件。 2、BoxSwitch.vue文件中 （1）、加载需要的js文件 import * as THREE from 'three' import * a...
threejs点击gltf模型，光线投射获取不到数据问题
tutouxiaoyaonie的博客
09-29 1119
threejs点击gltf模型，光线投射获取不到数据问题
Blender中gltf/glb/bin格式
03-29
Blender是一款流行的3D建模软件，支持导出gltf、glb和bin格式的3D模型。 gltf（GL Transmission Format）是一种基于JSON格式的3D模型文件格式，支持包含纹理、材质、动画等多种属性的3D模型导出。gltf文件格式可以被多个3D引擎和软件直接导入和使用。 glb是gltf的二进制格式，将gltf中的JSON数据转换成了二进制格式，可以更快地加载和解析。glb文件格式通常用于在WebGL应用程序中加载3D模型。 bin是gltf或glb文件的附属文件，存储模型数据的二进制文件。当3D模型包含大量纹理、材质和动画等属性时，bin文件可以将这些数据分离出来，减小gltf或glb文件的体积，提高加载速度。 在Blender中，可以通过插件或添加扩展来支持gltf、glb和bin格式的导出。其中，Blender原生支持gltf和glb格式的导出，可以通过文件-导出-GLTF/GLB选项进行操作。在导出gltf或glb格式时，可以选择是否包含bin文件，以及是否压缩纹理和材质数据等属性。如果需要单独导出bin文件，可以在导出gltf或glb文件时选择“不包含bin文件”。 总之，gltf、glb和bin格式是现代3D模型文件格式的代表，具有体积小、加载快、支持多种属性等优点，可以满足不同应用场景下的需求。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值