threejs项目 :GLTF格式简介 (Web3D领域JPG)

这篇具有很好参考价值的文章主要介绍了threejs项目 :GLTF格式简介 (Web3D领域JPG)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

参考资料:threejs中文网

threejs qq交流群:814702116

GLTF格式简介 (Web3D领域JPG)

本节课算是科普介绍,不用掌握具体的知识细节,大概有个印象即可。

gltf格式的重要性

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

不仅three.js,其它的WebGL三维引擎cesium、babylonjs都对gltf格式有良好的的支持。

GLTF 2.0

Khronos Group组织2015发布了GLTF 1.0版本,在2017年又发布了GLTF2.0的版本。

关于glTF的更多介绍和信息,可以查看github:https://github.com/KhronosGroup/glTF

gltf包含内容

相比较obj、stl等格式而言,.gltf格式可以包含更多的模型信息。

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

GLTF格式信息

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

{
  "asset": {
    "version": "2.0",
  },
...
// 模型材质信息
  "materials": [
    {
      "pbrMetallicRoughness": {//PBR材质
        "baseColorFactor": [1,1,0,1],
        "metallicFactor": 0.5,//金属度
        "roughnessFactor": 1//粗糙度
      }
    }
  ],
  // 网格模型数据
  "meshes": ...
  // 纹理贴图
  "images": [
        {
            // uri指向外部图像文件
            "uri": "贴图名称.png"//图像数据也可以直接存储在.gltf文件中
        }
   ],
     "buffers": [
    // 一个buffer对应一个二进制数据块,可能是顶点位置 、顶点索引等数据
    {
      "byteLength": 840,
     //这里面的顶点数据,也快成单独以.bin文件的形式存在   
      "uri": "data:application/octet-stream;base64,AAAAPwAAAD8AAAA/AAAAPwAAAD8AAAC/.......
    }
  ],
}

.bin文件

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

"buffers": [
    {
        "byteLength": 102040,
        "uri": "文件名.bin"
    }
]

二进制.glb

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

导出gltf

blender:最新版本可以直接导出gltf。

3damx gltf相关插件:https://github.com/BabylonJS/Exporters/releases

Blender导入导出gltf模型文件

你可以用Blender软件导出绘制好的三维模型,也可以打开和预览gltf格式文件模型。文章来源地址https://www.toymoban.com/news/detail-819799.html

到了这里,关于threejs项目 :GLTF格式简介 (Web3D领域JPG)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 什么是Web3D?Web3D技术发展历程以及Web3D应用场景

    当今的互联网已经迈入了第三代,这被称为Web3.0,而Web3D正是Web3.0的其中一个技术分支。Web3D是指将三维图形技术应用于Web上的技术,它是将3D图形和Web技术结合起来的一个分支,可以使用户在Web上以更真实、更直观的方式浏览和操作虚拟场景。本文将介绍什么是Web3D、Web3D技术

    2024年02月15日
    浏览(38)
  • Web3D开发经验分享:基于Three.js的Web3D建模案例

    个人主页: 左本Web3D,更多案例预览请点击==》 在线案例 个人简介:专注Web3D使用ThreeJS实现3D效果技巧和学习案例 💕 💕积跬步以至千里,致敬每个爱学习的你。喜欢的话请三连,有问题请私信或者加微信         随着互联网的快速发展,Web3D技术也越来越成熟,越来越

    2024年02月13日
    浏览(36)
  • 如何使用 ThreeJs 以 glTF、FBX 和 OBJ 文件格式加载 3D 模型,使用 ThreeJS 加载和显示带有纹理的 3D 模型

    在本文中,我展示了如何使用 ThreeJS 在 Web 视图中加载 3D 模型。Three.js 是一个跨浏览器的 JavaScript 库和应用程序编程接口,用于使用 WebGL 在 Web 浏览器中创建和显示动画 3D 计算机图形。加载不完整的原因有很多,例如纹理和材质渲染不正确。 创建场景 渲染场景 动画立方体

    2023年04月08日
    浏览(38)
  • 初识web3D--webGL/webGPU

    当今互联网时代,我们已经逐渐习惯了浏览和享受丰富多样的网络内容。从文字、图片到视频,我们可以在Web上畅游于各种信息和娱乐资源之间。然而,随着科技的不断进步,一个全新而令人兴奋的概念正在崭露头角——Web3D。 Web3D是一种革命性的技术,它将三维图形、虚拟

    2024年02月04日
    浏览(42)
  • 17个WebGL框架及Web3D图形库

    WebGL是基于OpenGL的JavaScript API库,允许Web浏览器在浏览器中渲染3D / 2D图形,而无需安装额外的插件、桌面应用程序。WebGL允许通过浏览器使用机器GPU将3D图形渲染成HTML页面。WebGL目前在大多数浏览器(如Google Chrome,Mozilla Firefox和Safari)中都受支持。WebGL可以通过浏览器设置或使用

    2024年02月06日
    浏览(48)
  • 纯干货!最全WebGL框架及Web3D图形库

    WebGL 是一个 JavaScript API,用于在 Web 浏览器中呈现交互式 2D 和 3D 图形。它基于 OpenGL ES,这是一种广泛使用的嵌入式系统图形渲染标准。 WebGL 通常用于各种应用程序,包括: 3D 图形: WebGL 允许开发人员在 Web 浏览器中创建和显示 3D 图形,从而实现沉浸式体验、游戏、模拟和

    2024年02月21日
    浏览(43)
  • 智慧大棚Web3D可视化系统 构建高效农业场景

    农业的发展离不开农作物的生长,而农作物的生长会受到多方面的限制,主要是外界因素,因此,智慧农业便将传统农业与科技结合起来,衍生出智慧大棚,从而让农业得以快速发展。 我国农业的基本现状是“大国小农”,农业产业发展仍然受限于农业从业人员匮乏、年龄老

    2023年04月19日
    浏览(70)
  • 智慧垃圾焚烧发电厂Web3D可视化管理系统

    随着我国生产力的飞速发展和经济的迅速崛起,城市生活垃圾作为一种生物质能,将其燃烧用于发电,可以有效节约化石能源。 随着城镇化进程加速、人民生活水平持续提升,城市生活垃圾产生量也在逐年增长。生活垃圾是“放错地方的资源”,能否处理好这些“放错地方的资

    2024年02月08日
    浏览(43)
  • three.js加载3D模型,在网页上展示3D模型(.glb.gltf.fbx格式)

    Three.js是一款开源的主流3D绘图JS引擎,简单点,可以将它理解为three+js就可以了,three表示3D,js表示JavaScript的意思。 结构  .glb.gltf文件最好放在服务器上 放在本地容易报找不到的错 .fbx格式文件可以在本地用3d看图(win10自带)打开另存为.glb格式 index.html代码 js代码 项目案例

    2024年02月11日
    浏览(37)
  • Panda3d如何获取到可用的模型?Maya、3D Max、OBJ等3D格式转换为egg、gltf文件

    ​ 使用Panda3d进行3D环境建模也有一段时间了,真的是被折磨的头秃。。。不过也不得不说,Panda3D也确实是一个比较优秀的3D游戏引擎,还是能满足你的大部分需要的。 ​ 如果你在深入使用Panda3d后,我相信有个问题那绝对是让人头大的,那就是模型问题。对于没有学过3D建模

    2024年02月05日
    浏览(32)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包