加载模型有俩种方法 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,要打开