cesium 加载模型动画最详细版

加载模型有俩种方法 primitives和entities。新版的目前 "cesium": "^1.119.0",又有更新，以下以次距离。

新版的primitive

 async addAnimatedPrimityModel(lngLatHeight, option) {
    const position = Cesium.Cartesian3.fromDegrees(lngLatHeight[0], lngLatHeight[1], lngLatHeight[2])
    const heading = Cesium.Math.toRadians(option.headingAngle)
    const pitch = Cesium.Math.toRadians(option.pitchAngle)
    const roll = Cesium.Math.toRadians(option.rollAngle)
    const headingPitchRoll = new Cesium.HeadingPitchRoll(heading, pitch, roll)
    const fixedFrameTransform = Cesium.Transforms.localFrameToFixedFrameGenerator('north', 'west')
    const modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(position, headingPitchRoll, Cesium.Ellipsoid.WGS84, fixedFrameTransform)
    let animations = null
    const gltfCallback = (gltf) => {
      animations = gltf.animations
    }
    const newOption = Object.assign({}, option, { modelMatrix, gltfCallback })
    try {
      const model = await Cesium.Model.fromGltfAsync(newOption)
      model.FFtype = 'FFGltfPrimitive'
      this.ffCesiumGltfCollection.add(model)
      model.readyEvent.addEventListener(() => {
        model.activeAnimations.add({
          index: animations.length - 1,
          loop: Cesium.ModelAnimationLoop.REPEAT,
          multiplier: 0.5
        })
      })
      return model
    } catch (error) {
      console.log(`Failed to load model. ${error}`)
    }
  },

// 定义 gltfCallback 回调来获取动画数据 

一个重点就是添加：gltfCallback属性。

旧版primitive

export function addGLTFprimitive(url: string, positions: Cesium.Matrix4,index:number) {
  var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
    Cesium.Cartesian3.fromDegrees(118.120679, 24.515347));
  const model = Cesium.Model.fromGltf({
    url: url,
    id: `11id${index}`,
    modelMatrix: positions,
    scale: 1000.0,
  })
  viewer.scene.primitives.add(model);
  
  model.readyPromise.then(function(model) {
    console.log('model222',model);
    model.activeAnimations.addAll({
          multiplier: 1,
          loop: Cesium.ModelAnimationLoop.REPEAT,
          reverse : false //false顺时针  true逆时针
        })
//单独添加动画
  // model.activeAnimations.add({
  //     name : 'Blink',
  //     // startTime : startTime,
  //     // delay : 0.0,                          // Play at startTime (default)
  //     // stopTime : Cesium.JulianDate.addSeconds(startTime, 4.0, new Cesium.JulianDate()),
  //     // removeOnStop : false,                 // Do not remove when animation stops (default)
  //     // multiplier : 2.0,                        // Play at double speed
  //     reverse : true,                       // Play in reverse
  //     loop : Cesium.ModelAnimationLoop.REPEAT      // Loop the animation
  //   });

  });

entities添加模型动画

  addAnimatedEntityModel(lngLatHeight, optionModel) {
    const position = this.Cesium.Cartesian3.fromDegrees(...lngLatHeight)
    const heading = Cesium.Math.toRadians(optionModel.headingAngle) //135度转弧度
    // const heading = Cesium.Math.toRadians(optionModel.heading) //135度转弧度
    const pitch = Cesium.Math.toRadians(0)
    const roll = 0
    const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
    const orientation = Cesium.Transforms.headingPitchRollQuaternion(position, hpr)
    let models = {
      name: `gltf`,
      // id: `aagltf${index}`,
      position: position,
      orientation: orientation,
      model: {
        uri: optionModel.url, //注意entitits.add方式加载gltf文件时，这里是uri，不是url，并且这种方式只能加载.glb格式的文件
        scale: optionModel.scale, //缩放比例
        minimumPixelSize: optionModel.minimumPixelSize, //最小像素大小，可以避免太小看不见
        maximumScale: optionModel.maximumScale, //模型的最大比例尺大小。minimumPixelSize的上限
        incrementallyLoadTextures: true, //加载模型后纹理是否可以继续流入
        runAnimations: true, //是否启动模型中制定的gltf动画
        clampAnimations: true, //制定gltf动画是否在没有关键帧的持续时间内保持最后一个姿势
        shadows: Cesium.ShadowMode.ENABLED,
        heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
        // silhouetteSize: 18.0,
        runAnimations: true, //指定是否应启动模型中指定的glTF动画
        silhouetteColor: new Cesium.Color(1.0, 0.0, 1.0, 1)
      }
    }
    const entity = this.viewer.entities.add(models)
    console.log('entity---1', entity)
    let model = entity.model._model
    console.log('model', model)
    return entity
  },

注意  shouldAnimate: true,要打开