glTF介绍

glTF（全称为GL Transmission Format）是一种用于在实时图形应用程序中传输和加载3D模型的开放标准格式。它是由Khronos Group开发的，旨在成为WebGL、OpenGL和Vulkan等图形API的通用3D模型格式。 glTF的设计目标是在实时图形应用程序中提供高效、可扩展和可互操作的3D模型传输格式。它使用JSON（JavaScript Object Notation）作为描述模型数据的格式，并支持嵌入的二进制数据和纹理。glTF文件通常包含模型的几何信息、材质信息、动画信息和场景信息等。 glTF具有许多优点，使其成为实时图形应用程序中的理想选择。

主要优点

轻量和高效：glTF使用二进制格式存储模型数据，因此文件大小相对较小，加载速度较快。
可扩展：glTF支持多种3D模型的属性和特性，包括几何、材质、动画、骨骼等。这使得它适用于各种应用场景，从简单的静态模型到复杂的动态场景。
可互操作性：glTF是一个开放的标准，被广泛支持和采用。它可以在不同的图形API和软件工具之间进行交换和共享，使得模型的创建、编辑和展示更加灵活和方便。
Web集成：glTF与WebGL和HTML5等Web技术紧密集成，可以直接在网页上加载和渲染，无需额外的插件或软件。

3D模型格式

`.gltf`

是一种使用JSON（JavaScript Object Notation）描述3D模型数据的格式。glTF文件通常包含模型的几何信息、材质信息、动画信息和场景信息等。glTF文件是文本文件，可以通过文本编辑器进行查看和编辑。它通常由一个glTF文件和多个外部资源文件（如纹理、缓冲区等）组成。

`.glb`

是glTF的二进制版本，也被称为glTF Binary。glb文件是二进制文件，将模型的所有数据（包括几何、材质、动画等）都嵌入到一个文件中，不需要外部资源文件。glb文件更加紧凑和高效，加载速度也更快。由于所有数据都被嵌入到一个文件中，glb文件在传输和存储方面更加方便。

主要结构描述

glTF主要结构

asset：描述了glTF文件的版本、生成器和其他元数据信息。
scene：指定了默认场景的索引。一个glTF文件可以包含多个场景，每个场景包含了节点（nodes）和其他相关的元素。
nodes：定义了场景中的节点，每个节点可以包含一个或多个网格（mesh）。
meshes：定义了模型的网格，每个网格由一个或多个网格原语（primitives）组成。网格原语可以是三角形、线条或点。
materials：定义了模型的材质，包括颜色、纹理和其他属性。
textures：定义了模型使用的纹理，包括颜色纹理、法线纹理、金属度纹理等。
images：定义了纹理使用的图像数据，可以是外部链接或嵌入的二进制数据。
animations：定义了模型的动画，包括关键帧动画、骨骼动画等。
skins：定义了模型的蒙皮（skin），用于骨骼动画。
cameras：定义了模型的摄像机，包括透视摄像机和正交摄像机。

除了上述主要结构，glTF还支持其他一些辅助结构，如场景中的光源（lights）、节点的变换（transformations）、缓冲区（buffers）等。

总之，glTF使用JSON描述了3D模型的结构，包括场景、节点、网格、材质、纹理、动画等。这种结构化的描述使得glTF成为一种高效、可扩展和可互操作的3D模型传输格式。

加载模型

Cesium提供了两种方式加载glTF模型，分别是通过 Entity API 和 Primitive API 两个 API 实现的

Entity方式

var position = Cesium.Cartesian3.fromDegrees(-120.05, 44, 0);
    var heading = Cesium.Math.toRadians(45);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );
    var model_entity = viewer.entities.add({
      name: "gltf模型",
      position: position,
      // 默认情况下，模型是直立的并面向东。
      // 通过 Quaternion 为 Entity.orientation 属性指定值来控制模型的方向，控制模型的航向，俯仰和横滚。
      orientation: orientation,
      model: {
        show: true,
        uri: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
        scale: 1.0, // 缩放比例
        minimumPixelSize: 128, // 最小像素大小
        maximumScale: 20000, // 模型的最大比例尺大小。 minimumPixelSize的上限
        incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
        runAnimations: true, // 是否应启动模型中指定的glTF动画
        clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势

        // 指定模型是否投射或接收来自光源的阴影 type:ShadowMode
        // DISABLED 对象不投射或接收阴影;ENABLED 对象投射并接收阴影;CAST_ONLY  对象仅投射阴影;RECEIVE_ONLY  对象仅接收阴影
        shadows: Cesium.ShadowMode.ENABLED,
        heightReference: Cesium.HeightReference.NONE,
      },
    });
    // viewer.trackedEntity = entity; // 相机保持在实体上

var position = Cesium.Cartesian3.fromDegrees(-120.05, 44, 0);
    var heading = Cesium.Math.toRadians(45);
    var pitch = 0;
    var roll = 0;
    var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
    var orientation = Cesium.Transforms.headingPitchRollQuaternion(
      position,
      hpr
    );
    var model_entity = viewer.entities.add({
      name: "gltf模型",
      position: position,
      // 默认情况下，模型是直立的并面向东。
      // 通过 Quaternion 为 Entity.orientation 属性指定值来控制模型的方向，控制模型的航向，俯仰和横滚。
      orientation: orientation,
      model: {
        show: true,
        uri: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
        scale: 1.0, // 缩放比例
        minimumPixelSize: 128, // 最小像素大小
        maximumScale: 20000, // 模型的最大比例尺大小。 minimumPixelSize的上限
        incrementallyLoadTextures: true, // 加载模型后纹理是否可以继续流入
        runAnimations: true, // 是否应启动模型中指定的glTF动画
        clampAnimations: true, // 指定glTF动画是否应在没有关键帧的持续时间内保持最后一个姿势

        // 指定模型是否投射或接收来自光源的阴影 type:ShadowMode
        // DISABLED 对象不投射或接收阴影;ENABLED 对象投射并接收阴影;CAST_ONLY  对象仅投射阴影;RECEIVE_ONLY  对象仅接收阴影
        shadows: Cesium.ShadowMode.ENABLED,
        heightReference: Cesium.HeightReference.NONE,
      },
    });
    // viewer.trackedEntity = entity; // 相机保持在实体上

Primitive方式

var origin = Cesium.Cartesian3.fromDegrees(-120, 44.0, 0);
    // 创建一个本地的东北向上坐标系，其原点为经度-120度，纬度44.0度。
    // 可以随时更改模型的modelMatrix属性以移动或旋转模型。
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
    var model = viewer.scene.primitives.add(
      Cesium.Model.fromGltf({
        url: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
        modelMatrix: modelMatrix,
        minimumPixelSize: 128,
        maximumScale: 20000,
      })
    );
    model.readyPromise.then(function (model) {
      // Play all animations when the model is ready to render
      model.activeAnimations.addAll();
    });

var origin = Cesium.Cartesian3.fromDegrees(-120, 44.0, 0);
    // 创建一个本地的东北向上坐标系，其原点为经度-120度，纬度44.0度。
    // 可以随时更改模型的modelMatrix属性以移动或旋转模型。
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(origin);
    var model = viewer.scene.primitives.add(
      Cesium.Model.fromGltf({
        url: "./data/models/DracoCompressed/CesiumMilkTruck.gltf",
        modelMatrix: modelMatrix,
        minimumPixelSize: 128,
        maximumScale: 20000,
      })
    );
    model.readyPromise.then(function (model) {
      // Play all animations when the model is ready to render
      model.activeAnimations.addAll();
    });

glTF介绍 ​

3D模型格式 ​

.gltf ​

.glb ​

主要结构描述 ​

相关工具推荐 ​

加载模型 ​

Entity方式 ​

Primitive方式 ​