【CesiumJS-4】加载其他格式3D模型文件(glb、gltf等)

entities方式引入3D模型

  const entity = viewer.value.entities.add({
    name: "car",
    position: Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
    orientation: Cesium.Transforms.headingPitchRollQuaternion(
      Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
      new Cesium.HeadingPitchRoll(
        Cesium.Math.toRadians(90), // 设置这个属性即可（顺时针旋转的角度值）
        Cesium.Math.toRadians(0),
        Cesium.Math.toRadians(0)
      )
    ),
    model: {
      uri: "/model/car.glb", // /model/build.gltf
      scale: 10,
      runAnimations: true, // 是否显示动画
      clampAnimations: true, // 是否保持最后一针的动画
      // roll: 90, // 旋转
      // minimumPixelSize: 128, // 最小的模型像素
      // maximumScale: 20000, // 最大的模型像素
      // color: Cesium.Color.RED, // 模型加颜色
      // show: true,
      // color: this.getColor('Red', 1.0), //> 模型颜色与透明度
      // colorBlendMode: this.getColorBlendMode('Highlight'), //> 模型颜色模式
      // colorBlendAmount: parseFloat(0.5), //> 模型混合度
      // silhouetteColor: this.getColor('Red', 1.0), //> 模型轮廓颜色
      // silhouetteSize: parseFloat(2), //> 模型轮廓大小
    }
  })
  // 让摄像机视口快速定位到模型位置
  viewer.value.trackedEntity = entity;

CZML方式引入3D模型

  const czml = [
    {
      id: "document",
      name: "CZML Model",
      version: "1.0",
    },
    {
      id: "aircraft model",
      name: "Cesium Air",
      position: {
        cartographicDegrees: [120.13699186126235, 30.320240186854843, 10000], // 生成位置
      },
      model: {
        gltf: "/model/build.gltf", // 文件路径
        scale: 2.0,
        minimumPixelSize: 128,
      },
    },
  ];
  const dataSourcePromise = viewer.value.dataSources.add(
    Cesium.CzmlDataSource.load(czml)
  );
  dataSourcePromise
    .then(function (dataSource) {
      viewer.value.trackedEntity = dataSource.entities.getById(
        "aircraft model"
      );
    })
    .catch(function (error) {
      window.alert(error);
    });

完整代码

<template>
  <div id="cesiumContainer"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
const viewer = ref(null);

const initCesium = async () => {
  // 1.引入token
  Cesium.Ion.defaultAccessToken = "xxxxxxxxxxx";
  // 2.三维地球初始化
  viewer.value = new Cesium.Viewer("cesiumContainer", {
    animation: true, //是否创建动画小器件，左下角仪表
    shouldAnimate: true,
    fullscreenButton: false, //是否显示全屏按钮
    geocoder: false, //是否显示geocoder小器件，右上角查询按钮
    homeButton: false, //是否显示Home按钮
    infoBox: false, //是否显示信息框
    sceneModePicker: false, //是否显示3D/2D选择器
    scene3DOnly: false, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
    selectionIndicator: false, // 是否显示选取指示器组件
    timeline: false, // 是否显示时间轴
    navigationHelpButton: false,// 是否显示右上角的帮助按钮
    baselLayerPicker: false, // 将图层选择的控件关掉，才能添加其他影像数据
    shadows: false, // 是否显示背影
    baseLayerPicker: false, // 是否显示图层选择器
    orderIndependentTranslucency: false, //去掉大气层黑圈
  });

  // 加载3D模型
  // 1.entities方式
  // const entity = viewer.value.entities.add({
  //   name: "car",
  //   position: Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
  //   orientation: Cesium.Transforms.headingPitchRollQuaternion(
  //     Cesium.Cartesian3.fromDegrees(120.13699186126235, 30.320240186854843, 0),
  //     new Cesium.HeadingPitchRoll(
  //       Cesium.Math.toRadians(90), // 设置这个属性即可（顺时针旋转的角度值）
  //       Cesium.Math.toRadians(0),
  //       Cesium.Math.toRadians(0)
  //     )
  //   ),
  //   model: {
  //     uri: "/model/car.glb",
  //     scale: 10,
  //     runAnimations: true, // 是否显示动画
  //     clampAnimations: true, // 是否保持最后一针的动画
  //     // roll: 90, // 旋转
  //     // minimumPixelSize: 128, // 最小的模型像素
  //     // maximumScale: 20000, // 最大的模型像素
  //     // color: Cesium.Color.RED, // 模型加颜色
  //     // show: true,
  //     // color: this.getColor('Red', 1.0), //> 模型颜色与透明度
  //     // colorBlendMode: this.getColorBlendMode('Highlight'), //> 模型颜色模式
  //     // colorBlendAmount: parseFloat(0.5), //> 模型混合度
  //     // silhouetteColor: this.getColor('Red', 1.0), //> 模型轮廓颜色
  //     // silhouetteSize: parseFloat(2), //> 模型轮廓大小
  //   }
  // })
  // // 让摄像机视口快速定位到模型位置
  // viewer.value.trackedEntity = entity;

  // 2. CZML方式
  const czml = [
    {
      id: "document",
      name: "CZML Model",
      version: "1.0",
    },
    {
      id: "aircraft model",
      name: "Cesium Air",
      position: {
        cartographicDegrees: [120.13699186126235, 30.320240186854843, 0],
      },
      model: {
        gltf: "/model/build.gltf",
        scale: 2.0,
        minimumPixelSize: 128,
      },
    },
  ];
  const dataSourcePromise = viewer.value.dataSources.add(
    Cesium.CzmlDataSource.load(czml)
  );
  dataSourcePromise
    .then(function (dataSource) {
      viewer.value.trackedEntity = dataSource.entities.getById(
        "aircraft model"
      );
    })
    .catch(function (error) {
      window.alert(error);
    });

  //缩放
  viewer.value.scene.screenSpaceCameraController.zoomEventTypes = [
    Cesium.CameraEventType.WHEEL,
    Cesium.CameraEventType.PINCH,
  ];
  //视图视角切换
  viewer.value.scene.screenSpaceCameraController.tiltEventTypes = [
    Cesium.CameraEventType.PINCH,
    Cesium.CameraEventType.RIGHT_DRAG,
  ];

}

onMounted(() => {
  initCesium();
})
</script>

<style scoped>
#cesiumContainer {
  position: relative;
  width: 100vw;
  height: 100vh;
}
</style>