🏚️ThreeJS — 外部模型
00 分钟
2023-7-31
2023-7-31
type
status
date
slug
summary
tags
category
icon
password
Edited
Jul 31, 2023 06:27 AM
Created
Jul 31, 2023 06:20 AM

GLTF格式简介(Web3D领域JPG)

GLTF格式的重要性

GLTF格式是新2015发布的三维模型格式,随着物联网、WebGL、5G的进一步发展,会有越来越多的互联网项目Web端引入3D元素,你可以把GLTF格式的三维模型理解为.jpg、.png格式的图片一样,现在的网站,图片基本是标配,对于以后的网站来说如果需要展示一个场景,使用3D来替换图片表达也是很正常的事情。图片有很多格式,对于三维模型自然也是如此,Web开发的时候图片会有常用格式,对于Web3D开发也一样,肯定会根据需要选择一个常见的大家都熟悉的格式,随时时间的发展,GLTF必然称为一个极为重要的标准格式。
不仅three.js,其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。

GLTF包含内容

相比较obj、stl等格式而言,.gltf格式可以包含更多的模型信息。
.gltf格式文件几乎可以包含所有的三维模型相关信息的数据,比如模型层级关系、PBR材质、纹理贴图、骨骼动画、变形动画...

GLTF格式信息

如果你有一定的前端基础,那么你对JSON一定不陌生,GLTF文件就是通过JSON的键值对方式来表示模型信息,比如meshes表示网格模型信息,materials表示材质信息...

.bin文件

有些glTF文件会关联一个或多个.bin文件,.bin文件以二进制形式存储了模型的顶点数据等信息。 .bin文件中的信息其实就是对应gltf文件中的buffers属性,buffers.bin中的模型数据,可以存储在.gltf文件中,也可以单独一个二进制.bin文件。

二进制.glb

gltf格式文件不一定就是以扩展名.gltf结尾,.glb就是gltf格式的二进制文件。比如你可以把.gltf模型和贴图信息全部合成得到一个.glb文件中,.glb文件相对.gltf文件体积更小,网络传输自然更快。
 

使用

  1. gltf模型加载器GLTFLoader.js
  1. 相机参数根据需要设置
  1. 加载gltf的时候,webgl渲染器编码方式设置
 

纹理贴图颜色偏差解决

three.js加载gltf模型的时候,可能会遇到three.js渲染结果颜色偏差,对于这种情况,你只需要修改WebGL渲染器默认的编码方式.outputEncoding即可
 

模型加载进度条

主要还是操作load函数
接下来你就可以通过加载过程函数来模拟进度条
 

参考链接

  1. Three.js中文网 (webgl3d.cn)
上一篇
ThreeJS — Shadow
下一篇
ThreeJS — PBR

评论
Loading...