【threejs】GLTF文件简要说明

爱惜自己的鼠标手
534 阅读4分钟

什么是Threejs

Three.js 是一个 3D JavaScript 库，使开发人员能够为网络创建 3D 体验3D

在实际工作过程中，我们往往使用threejs 的加载器去加载制作好的3D文件

在threejs中官方推荐使用glTF（gl传输格式）,GLB和.GLTF是这种格式的这两种不同版本

3D文件必须存储什么

  • Geometry【几何信息】
  • Materials【材质信息】
  • Scene Hierarchy【场景层次】
  • Light【光线信息】
  • Animation【动画信息】

主要的3D文件格式

  • obj

    • 由Wavefront Technologies创建【Created by Wavefront Technologies】
    • Media类型【Media 类型】：text/plain
    • 纹理贴图【Texture Maps】：使用文件名【by filename】
    • 动画【Animation】：不包括
    • 骨骼信息【Skeleton】：不支持
    • threejs 加载器：objLoader

  • 3ds

    • 由AutoDesk创建【Created by AutoDesk】
    • Media类型【Media 类型】：application/x-3ds
    • 纹理贴图【Texture Maps】：by filename 8.3 format【8.3文件命名规范：源自DOS时代的8.3格式文件名规范】
    • 动画【Animation】：包括
    • 骨骼信息【Skeleton】：支持
    • threejs 加载器：没有加载器

  • vrml

    • 由web3d.org创建【Created by web3d.org】
    • Media类型【Media 类型】：application/x-cc3d
    • 纹理贴图【Texture Maps】：by filename 8.3 format【8.3文件命名规范：源自DOS时代的8.3格式文件名规范】
    • 动画【Animation】：包括
    • 骨骼信息【Skeleton】：支持
    • threejs 加载器：VRMLoader

  • dae

    • 由sony和Kronos Group创建【Created by sony+Kronos Group】
    • Media类型【Media 类型】：application/vnd.collada+xml
    • 纹理贴图【Texture Maps】：by filename
    • 动画【Animation】：包括
    • 骨骼信息【Skeleton】：支持
    • threejs 加载器：ColladaLoader

  • fbx

    • 由AutoDesk创建【Created by AutoDesk】
    • Media类型【Media 类型】：application/octet-stream
    • 纹理贴图【Texture Maps】：可嵌入【Can be embedded】
    • 动画【Animation】：完全支持
    • 骨骼信息【Skeleton】：完全支持
    • threejs 加载器：FBXLoader

  • gltf

    • 由Kronos Group创建【Created by Kronos Group】
    • Media类型【Media 类型】：application/octet-stream
    • 纹理贴图【Texture Maps】：支持嵌入与文件
    • 动画【Animation】：完全支持
    • 骨骼信息【Skeleton】：完全支持
    • threejs 加载器：GLTFLoader

为什么使用gltf？

glTF这种格式是专注于在程序运行时呈现三维物体的，并且glTF 最大限度地减少了 3D 资产的大小，以及解压和使用这些资产所需的运行时处理。

同时一个 glTF 文件可能包含一个或多个场景、网格、材料、纹理、皮肤、骨架、变形目标、动画、灯光和相机。

认识gltf文件

glTF 的核心是一个 JSON 文件。该文件描述了 3D 场景的全部内容。它由场景结构本身的描述组成，由定义场景图的节点层次结构给出。出现在场景中的 3D 对象是使用附加到节点的网格定义的。材料定义了对象的外观。动画描述了 3D 对象如何随时间变换（例如，旋转或平移），而皮肤定义了对象的几何形状如何基于骨架姿势变形。相机描述渲染器的视图配置

gltf 本质上是一个Json文件+数据，其中json文件描述了整个3D场景也包含了对场景结构进行描述的场景图

JSON格式.jpg

  • gltf格式顶级元素概览

gltf格式的json部分顶级元素.jpg

  • JSON文件解析：

    • scene：glTF格式的场景结构描述条目。它通过引用node来定义场景图。 node：场景图中的一个结点。它可以包含一个变换(比如旋转或平移)，引用更多的子结点。它可以引用网格和相机，以及描述网格变换的蒙皮。

      补充：

      glTF格式使用scene对象来描述场景。对glTF数据的JSON文件进行解析时，对场景结构的遍历也是从scene对象开始。每个scene对象引用了一个nodes数组，nodes数组通过索引引用了场景的根结点。

    • camera：定义了用于渲染场景的视锥体配置。

    • mesh：描述了场景中出现的3D对象的网格数据。它引用的accessor对象可以用来访问真实的几何数据。它引用的material对象定义了3D对象的外观。

    • skin：定义了用于蒙皮的参数，参数的值通过一个accessor对象获得。

    • animation：描述了一些结点如何随时间进行变换(比如旋转或平移)。

    • accessor：一个访问任意数据的抽象数据源。被mesh、skin和animation元素使用来提供几何数据，蒙皮参数和基于时间的动画值。它通过引用一

    • bufferView对象，来引用实际的二进制数据。

    • material：包含了定义3D对象外观的参数。它通常引用了用于3D对象渲染的texture对象。

    • texture：定义了一个sampler对象和一个image对象。sampler对象定义了image对象在3D对象上的张贴方式。 buffer，bufferView和accessor：提供了对mesh对象实际的几何数据的描述。

    • image: 可以指可以用作渲染对象纹理的外部图像文件：

avatar
文章
阅读
粉丝