My English is not very good so please forgive me.
As you can see, the two cars were added in almost the same way, but a small problem caused the car to quivering. This may be a bug, the detailed code is below，according to my tests, this problem occurs whenever the initial location is underground.
For example,new Cesium.Matrix4(0, 0, 0, -2340521.983547211,0, 0, 0, 5372045.682460344,0,0, 0, 2510228.234199523,0, 0, 0, 0)is normal,new Cesium.Matrix4(0, 0, 0, -234.983547211,0, 0, 0, 5372.682460344,0,0, 0, 2510.234199523,0, 0, 0, 0) will quivering.
var viewer = new Cesium.Viewer("cesiumContainer");
viewer.camera.setView({
destination: new Cesium.Cartesian3.fromArray([-2340644.5916329175, 5372105.70863682, 2510172.9626549776]),
orientation: {
heading: 5.450364925755405,
roll: 6.281199035396841,
pitch: -0.4315232002263252,
},
});
let basePointList = [
[-2340498.971842711, 5372048.21832235, 2510244.177943798],
[-2340480.015837503, 5372049.87780412, 2510258.196383436],
[-2340458.7889851714, 5372051.483236087, 2510274.4625412007],
];
let path = createPath(basePointList.map((item) => Cesium.Cartesian3.fromArray(item)));
let modelMatrixList = createModelMatrixList(path);
//闪烁跳动
let carModelInstanceCollection1 = viewer.scene.primitives.add(
new Cesium.ModelInstanceCollection({
url: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
instances:[{
//flashing
modelMatrix: Cesium.Matrix4.ZERO,
}],
})
);
carModelInstanceCollection1._instances[0].modelMatrix = modelMatrixList[400];
//正常
let carModelInstanceCollection2 = viewer.scene.primitives.add(
new Cesium.ModelInstanceCollection({
url: "../../SampleData/models/GroundVehicle/GroundVehicle.glb",
instances:[{
//normal
modelMatrix: modelMatrixList[0],
}],
})
);
carModelInstanceCollection2._instances[0].modelMatrix = modelMatrixList[1200];
/**
* @lastUpdateBy : 张瀚
* @description: 通过打点生成行车轨迹，插值1厘米，按理说用地形生成，但是目前地形不准确，采用手动点选的方式会更好控制
* @param {*} basePointList
* @return {*}
*/
function createPath(basePointList) {
let results = [];
for (let i = 1; i < basePointList.length; i++) {
let start = basePointList[i - 1];
let end = basePointList[i];
//求两点方向
let direction = Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3());
//单位向量，1厘米
let normalize = Cesium.Cartesian3.multiplyByScalar(
Cesium.Cartesian3.normalize(direction, new Cesium.Cartesian3()),
0.01,
new Cesium.Cartesian3()
);
//求两点距离
let len = Cesium.Cartesian3.distance(start, end);
//不断移动，直到超过
for (let moveI = 0; moveI < len * 100; moveI++) {
Cesium.Cartesian3.add(start, normalize, start);
results.push(start.clone());
}
}
return results;
}
/**
* @lastUpdateBy : 张瀚
* @description: 生成每个刻度上的矩阵
* @param {*} basePointList
* @return {*}
*/
function createModelMatrixList(pointList) {
let modelMatrixList = [];
let tempCartesian3 = new Cesium.Cartesian3();
let tempQuaternion = new Cesium.Quaternion();
const scale = new Cesium.Cartesian3(1, 1, 1);
pointList.forEach((position, index) => {
//获取当前点和下一个点位置
let next = pointList[index + 1];
if (!position || !next || Cesium.Cartesian3.equals(position, next)) {
//方向不变
modelMatrixList.push(modelMatrixList[index - 1]);
return;
}
var direction = Cesium.Cartesian3.subtract(next, position, tempCartesian3);
Cesium.Cartesian3.normalize(direction, direction);
var rotationMatrix = Cesium.Transforms.rotationMatrixFromPositionVelocity(position, direction);
Cesium.Quaternion.fromRotationMatrix(rotationMatrix, tempQuaternion);
modelMatrixList.push(Cesium.Matrix4.fromTranslationQuaternionRotationScale(position, tempQuaternion, scale));
});
return modelMatrixList;
}