【ThreeJS基础教程-高级几何体篇】2.5 加载GLTF/GLB格式文件，Draco压缩文件的获取与加载
加载GLTF/GLB格式文件，Draco压缩文件的获取与加载
- 学习ThreeJS的捷径
- 加载GL格式模型
- 案例
- 案例效果
- threejs中常见的模型加载方式
- 三种常见的gl格式文件
- Draco压缩
- Draco介绍
- Draco使用过程中的常见误区
- 如何获取Draco模型
- gltf-pipeline
- Draco使用案例
- 案例效果
- 加载Draco常见错误处理方法
- 下一篇预告：
学习ThreeJS的捷径
本段内容会写在0篇以外所有的，本人所编写的Threejs教程中
对，学习ThreeJS有捷径
当你有哪个函数不懂的时候，第一时间去翻一翻文档
当你有哪个效果不会做的时候，第一时间去翻一翻所有的案例，也许就能找到你想要的效果
最重要的一点，就是，绝对不要怕问问题，越怕找找别人问题，你的问题就会被拖的越久
如果你确定要走WebGL/ThreeJS的开发者路线的话，以下行为可以让你更快的学习ThreeJS
- 没事就把所有的文档翻一遍，哪怕看不懂，也要留个印象，至少要知道Threejs有什么
- 没事多看看案例效果，当你记忆的案例效果足够多时，下次再遇到相似问题时，你就有可能第一时间来找对应的案例，能更快解决你自己的问题
- 上述案例不只是官网的案例，郭隆邦技术博客，跃焱邵隼，暮志未晚等站点均有不少优质案例，记得一并收藏
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，其他格式的文件也均以这样的方式加载
- 引入对应的Loader文件
- 读取模型后对加载完成后的模型对象执行一次console，在console中展开并分析其内部数据，并找到对应的Object3D对象或geometry
- 如果读取到的是geometry，需要你手动指定材质并手动创建mesh，如果读取到的直接是一个object3D对象，可以直接添加到scene中，如果读取到的是一组数据，那么我们需要先分析数据后再执行加载
在console中，我们可以看出，gl文件均由这几部分构成
| 属性名 | 值类型 | 属性说明 |
|---|---|---|
| animations | THREE.AnimationClip | 模型导出时，可以选择将动画烘焙好之后，保存到模型中，gl格式读取完成后，读取到的动画就是这个，本篇暂时不谈这个对象，在后续动画部分会着重讲解 |
| asset | Object | 一个对象，记录了gltf的版本号以及导出方式 |
| cameras | [THREE.Camera] | 相机数组，用于读取模型内的相机 |
| parser | GLTFParser | 格式转换器，可以无需关注 |
| scene | THREE.Group/Object3D/Scene | 这里就是主要的模型数据，可以被添加到scene中 |
| scenes | [THREE.Group/Object3D/Scene] | 场景数组，一个模型可能包含有多个场景时可以用到 |
| userData | Object | 用于保存用户数据的对象 |
所以我们在加载完成模型后，只需要把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使用过程中的常见误区
- Draco压缩，可以把文件大小压下来，但是笔者在使用过程中也出现了不少次的坏面破面，不同的模型执行压缩的情况，均有不同
- 不要仗着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.glbgltf-pipeline -i model.gltf -bgltf-pipeline -i model.glb -o model.gltfgltf-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常见错误处理方法
- 注意引用路径是否正确，draco有一个专门的解压文件库的路径，里面包含了四个文件，如果你使用的是ES6的引入方式，在jsm的文件夹下是找不到的，文件在这个位置：
检查你的文件是否执行过draco压缩，一般来说，windows自带的模型查看器直接可以打开gltf/glb文件，但是不能直接打开draco压缩后的gltf/glb，可以通过这个判断你的模型是否经历过draco压缩
使用threejs/editor或babylon模型沙盒检查模型是否可以被加载出来，如果这个模型在这两个编辑器内无法被加载出来，那么在你的程序中也依然无法加载，需重新处理模型
如果加载模型时未报错，请查看笔者前面的文章【ThreeJS基础教程-高级几何体篇】2.2 加载模型，加载模型时的常见错误
下一篇预告：
BufferGeometry介绍
【ThreeJS基础教程-高级几何体篇】2.5 加载GLTF/GLB格式文件，Draco压缩文件的获取与加载相关推荐
- 【ThreeJS基础教程-高级几何体篇】2.1更好的视觉效果-综合案例（2）
2.1更好的视觉效果-综合案例(2 学习ThreeJS的捷径 初识纹理Texture 如何生成一片草地 Texture与TextureLoader 做一个简单的地球出来 下一篇预告:加载模型 学习Th ...
- 【ThreeJS基础教程-高级几何体篇】2.6.1 BufferGeometry应用1-物体居中与包围盒的应用
BufferGeometry应用1-物体居中与包围盒的应用 学习ThreeJS的捷径 问题案例:为什么会围绕Y轴旋转 问题代码 案例效果 模型中心的概念 包围盒简介 修正Mesh中心到包围盒中心 关于 ...
- 【ThreeJS基础教程-材质纹理篇】3.2 初识基础网格材质MeshStandardMaterial
初识标准网格材质 学习ThreeJS的捷径 了解材质的基本知识 材质继承关系 常用的通用材质属性 alphaTest的验证和应用 depthTest和depthWrite应用 渲染哪一面Side 常用 ...
- 【ThreeJS基础教程-材质纹理篇】3.1 纹理知识进阶
纹理知识进阶 学习ThreeJS的捷径 如何用一张地板砖贴图制作出地板砖效果 旋转纹理 移动纹理 纹理旋转与移动的应用 简单的光圈效果 简单的流水效果 WebGL项目优化技巧:没必要的细节可以用纹理直 ...
- 【ThreeJS基础教程】0.在学习使用ThreeJS之前
[ThreeJS基础教程]0.在学习使用ThreeJS之前 什么人适合学习ThreeJS 什么人不建议学习ThreeJS或学起来比较累 了解ThreeJS ThreeJS文档在哪 关于<Thre ...
- 人工智能python自学教程-人工智能基础教程：Python篇（青少版)
人工智能基础教程:Python篇(青少版) 编辑推荐 源代码及PPT下载:https://pan.baidu.com/s/1mWa2fy457fhUXKxT-FgyPw 哈工智诚在线编程云平台:htt ...
- EGE基础：高级绘图篇
EGE专栏:EGE专栏 目录 一. EGE中的高级绘图函数 1. 高级绘图函数相比普通绘图函数的优势 1.1 图形边缘更为光滑 1.2 图形具有透明度 二. 高级函数的使用设置 1. 高级绘图函数设置 ...
- python人工智能编程教程-清华大学出版社-图书详情-《人工智能基础教程：Python篇（青少版）》...
2017 年国务院印发了<关于印发新一代人工智能发展规划的通知>,提出要围绕教育. 医疗.养老等迫切民生需求,加快人工智能创新应用.要发展智能教育,利用智能技术加 快推动人才培养模式.教学 ...
- DirectX12（D3D12）基础教程（外篇一）——编译Assimp
目录 1.前言 2.Assimp库简介 3.编译Assimp库的准备工作 4.下载Assimp源码并编译 1.前言 D3D12系列教程因为我转移精力学习Nodejs.VueJs等技能,暂时中断了一 ...
- DirectX12（D3D12）基础教程（外篇四）——用Assimp载入模型基础操作（无渲染纯命令行版）
目录 1.前言 2.Assimp使用简介 3.Assimp头文件和库文件引入 4.Import模型文件 5.aiScene基本数据结构及遍历 5.1.Assimp类图及关系 5.2.aiScene遍历 ...
最新文章
- Useful Shell Option – extglob 和 shopt命令
- 三个变量互换值_Python3 教程 变量类型
- REVERSE-PRACTICE-BUUCTF-29
- 自动补足算法是什么_数据、算法岗的几点经验分享！
- c语言中数组名可以与其他变量名相同,C语言初学者入门讲座 第九讲 数组（1）...
- css除法,CSS_关系数据库 除法，假设有两个关系，R(a,b,c)和T(b,c - phpStudy
- 【洛谷P3410】拍照题解（最大权闭合子图总结）
- 图层上下_「只要功夫深 不用关键帧」之图层序号的玩法
- 【转】QTableView 小结
- 六个问题让你更懂 React Fiber
- [转载] Numpy之logspace
- html网页设计课程的思维导图,UI设计初级教程学哪些？课程大纲和思维导图分享给你！...
- sqlplus中查看sid
- Thingworx连接Kepware
- 儿童学python下哪个软件好_少儿学编程适合哪个软件
- 过采样：SMOTE算法
- 学会提问-批判性思维
- 前端每日实战：66# 视频演示如何用纯 CSS 创作一台咖啡机
- 名人名言摘选-李嘉诚
- robot framework 实例：126邮箱登录