三维模型

什么是 gltf 模型？

.glTF 是一个基于 JSON 格式的文本文件，它可以包含场景、节点、网格信息、材质、动画、相机等3D模型元素，并且可以包括外部资源，如纹理、图像和二进制数据等。

.glTF文件易于阅读、修改和编辑，同时可以使用 gzip 进行压缩以减小文件大小，但是 .glTF 文件格式在处理复杂场景时，可能会变得比较冗长，处理速度较慢。

什么是 glb 模型？

.glb 是一种基于二进制的文件格式，它包含所有的 glTF 数据，包括所有的外部资源。由于 .glb 文件是二进制文件，大大减小了文件大小和加载时间，同时保持了 .glTF 文件的灵活性和可编辑性。

.glb 文件也可以使用 gzip 压缩以进一步减小文件大小，但是 .glb 文件格式作为二进制文件，难以直接进行编辑和修改。

加载gltf/glb模型

Cesium官方提供了glb模型，下载地址：glb模型。

onMounted(() => {
  const viewer = new Cesium.Viewer("cesiumContainer", {
    infoBox: false,
    baseLayerPicker: false,
    shouldAnimate: true, 	// 开启飞机动画
    shadows: true 			  // 开启飞机阴影
  });
});

Entity 加载

const position = Cesium.Cartesian3.fromDegrees(116.39, 38.9, 400.0);
// 设置飞机的俯仰角
const orientation = Cesium.Transforms.headingPitchRollQuaternion(
  position,
  new Cesium.HeadingPitchRoll(0, 0, 0)
);

const entity = viewer.entities.add({
  name: "gltf模型",
  position: position,
  orientation: orientation,
  model: {
    show: true,
    uri: "/glb/Cesium_Air.glb",
    minimumPixelSize: 200, // 模型最小显示像素大小
    maximumScale: 5000,    // 模型的最大缩放比例
    incrementallyLoadTextures: true, // 是否增量加载纹理
    runAnimations: true,   // 是否运行模型动画
    clampAnimations: true  // 是否将动画固定在最后一帧

    // 指定模型是否投射或接收来自光源的阴影
    /**
     * DISABLED：对象不投射或接收阴影
     * ENABLED：对象投射并接收阴影
     * CAST_ONLY：对象仅投射阴影
     * RECEIVE_ONLY：对象仅接收阴影
     */
    shadows: Cesium.ShadowMode.ENABLED,
    heightReference: Cesium.HeightReference.NONE,
  }
});

// 固定视角到飞机
viewer.camera.lookAt(
  position,
  new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90), 500)
);

Primitive 加载

Primitive 加载 gltf / glb 模型，需要使用 Cesium.Model.fromGltfAsync() 方法。

const position = Cesium.Cartesian3.fromDegrees(116.39, 38.9, 0);
// 创建一个东北向上的坐标系，原点经纬度为116.39，38.9
const modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(position);

const model = await Cesium.Model.fromGltfAsync({
  id: "01946DCE-A462-7170-A08A-B7646A0D9EE9",
  url: "/CesiumMilkTruck/CesiumMilkTruck.gltf",
  scale: 1,
  modelMatrix: modelMatrix,
  minimumPixelSize: 128,
  maximumScale: 20000,
  allowPicking: true,    // 允许pick拾取
  incrementallyLoadTextures: true, // 允许纹理流式加载
  clampAnimations: true, // 允许动画
  releaseGltfJson: true  // 释放 gltfJson
});

// primitive需要手动加载模型动画
model.readyEvent.addEventListener(() => {
  model.activeAnimations.addAll({
    multiplier: 0.5,
    loop: Cesium.ModelAnimationLoop.REPEAT
  });
});
const primitive = viewer.scene.primitives.add(model);

viewer.camera.lookAt(
  position,
  new Cesium.HeadingPitchRange(Cesium.Math.toRadians(0), Cesium.Math.toRadians(-90), 500)
);

什么是 modelMatrix 属性？

modelMatrix属性的类型是 Matrix4，即 4 x 4 的转换矩阵，用于将模型坐标转换为世界坐标，也就是为模型创建一个局部坐标系。如上面示例中的代码，为模型创建了一个本地的东北向上的坐标系，其原点为经度 116.39，纬度 38.9，高度 0。