请问大佬们，车辆模型在渲染的时候是一闪一闪的渲染出来？

Question

  // 接收websocket数据
  const onMessage = async (event) => {
    const data = JSON.parse(event.data);
    if (data.data == undefined) {
      console.log('未响应');
    } else {
      processPositionParams(data.data);
    }
  };
  // 封装处理位置参数的函数
  const positionParams = []; // 用于存储所有的位置参数数据
  const bufferLimit = 50; // 缓冲区大小限制，可以根据需求调整
  function processPositionParams(data) {
    const targetingTypes = {
      0x10: 'RTK',
      0x11: 'UWB',
      0x12: '融合'
    };
    const newPositionParam = {
      TargetingType: targetingTypes[data.type],
      UID: data.uid,
      Angle: data.angle,
      Height: data.height,
      longitude: data.longitude,
      latitude: data.latitude
    };
    positionParams.push(newPositionParam);
    // 超过缓冲区大小限制时移除最旧的位置参数数据
    if (positionParams.length > bufferLimit) {
      positionParams.shift();
    }
    const labelText = `终端ID:${data.uid},定位类型:${targetingTypes[data.type]}\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${data.height}`;
    CarModel(positionParams, newPositionParam.Angle); // 车辆模型
    pointPolyline(positionParams, labelText) // 轨迹点和轨迹线
  }
// 车辆模型
let carModelData = [];
function CarModel(positions, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000);
  for (const position of positions) {
    let entityIndexs = carModelData.length;
    const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);
    const CarModelMove = viewer.entities.add({
      position: new Cesium.CallbackProperty(() => {
        return cartesian3;
      }, false),
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        show: new Cesium.CallbackProperty(() => {
          return entityIndexs === carModelData.length - 1;
        }, false),
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
    carModelData.push(CarModelMove);
  }
}

Answer 1

你之前的代码在循环建新的模型，试试只建一个模型，更新位置和方向：

function CarModel(position, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000);
  const cartesian3 = Cesium.Cartesian3.fromDegrees(position.longitude, position.latitude, 0.4);

  if (!carModelData) {
    carModelData = viewer.entities.add({
      position: cartesian3,
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
  } else {
    carModelData.position = cartesian3;
    carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
  }
}

只渲染最新的位置，看看这个：

function CarModel(positions, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(0, 10000);

  // 获取最新的位置
  const latestPosition = positions[positions.length - 1];
  const cartesian3 = Cesium.Cartesian3.fromDegrees(latestPosition.longitude, latestPosition.latitude, 0.4);

  if (!carModelData) {
    carModelData = viewer.entities.add({
      position: cartesian3,
      orientation: Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll),
      model: {
        uri: "http://127.0.0.1:5501/car/scene.gltf",
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
  } else {
    carModelData.position = cartesian3;
    carModelData.orientation = Cesium.Transforms.headingPitchRollQuaternion(cartesian3, headingPitchRoll);
  }
}

Answer 2

为啥每一次从后台拿到数据后要再次调用CarModel呢？
这个初始化车辆模型的方法不是全局调用一次就好了嘛？车辆的position是一个callback，那么后续只要改变cartesian3的值即可。
而且这个CarModel方法还是在for循环positons的时候调用的，岂不是每次数据一来就至少渲染50次车辆？车辆频繁销毁+创建，肯定是会闪烁呀。

// 接收websocket数据
const onMessage = async (event) => {
  const data = JSON.parse(event.data);
  if (data.data == undefined) {
    console.log('未响应');
  } else {
    processPositionParams(data.data);
  }
};
const cartesian3 = undefined;
// 封装处理位置参数的函数
const positionParams = []; // 用于存储所有的位置参数数据
const bufferLimit = 50; // 缓冲区大小限制，可以根据需求调整
function processPositionParams(data) {
  const targetingTypes = {
    0x10: 'RTK',
    0x11: 'UWB',
    0x12: '融合',
  };
  const newPositionParam = {
    TargetingType: targetingTypes[data.type],
    UID: data.uid,
    Angle: data.angle,
    Height: data.height,
    longitude: data.longitude,
    latitude: data.latitude,
  };
  positionParams.push(newPositionParam);
  // 超过缓冲区大小限制时移除最旧的位置参数数据
  if (positionParams.length > bufferLimit) {
    positionParams.shift();
  }
  const labelText = `终端ID:${data.uid},定位类型:${
    targetingTypes[data.type]
  }\n经度:${data.longitude},纬度:${data.latitude}\n角度:${data.angle},高度:${
    data.height
  }`;
  if (positionParams.length === 1) {
    addCar();
  } else {
    changeCarPosition(positionParams[positionParams.length - 1]);
  }
  //CarModel(positionParams, newPositionParam.Angle); // 车辆模型
  pointPolyline(positionParams, labelText); // 轨迹点和轨迹线
}
// 车辆模型
let carModelData = [];
function CarModel(positions, angle) {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
    0,
    10000
  );
  for (const position of positions) {
    let entityIndexs = carModelData.length;
    const cartesian3 = Cesium.Cartesian3.fromDegrees(
      position.longitude,
      position.latitude,
      0.4
    );
    const CarModelMove = viewer.entities.add({
      position: new Cesium.CallbackProperty(() => {
        return cartesian3;
      }, false),
      orientation: Cesium.Transforms.headingPitchRollQuaternion(
        cartesian3,
        headingPitchRoll
      ),
      model: {
        uri: 'http://127.0.0.1:5501/car/scene.gltf',
        show: new Cesium.CallbackProperty(() => {
          return entityIndexs === carModelData.length - 1;
        }, false),
        color: Cesium.Color.CORAL,
        scale: 75,
        scaleByDistance,
        distanceDisplayCondition,
      },
    });
    carModelData.push(CarModelMove);
  }
}
function addCar() {
  const headingPitchRoll = new Cesium.HeadingPitchRoll(
    Cesium.Math.toRadians(110),
    Cesium.Math.toRadians(0),
    Cesium.Math.toRadians(0)
  );
  const scaleByDistance = new Cesium.NearFarScalar(200, 120, 1200, 0.6);
  const distanceDisplayCondition = new Cesium.DistanceDisplayCondition(
    0,
    10000
  );
  
  const CarModelMove = viewer.entities.add({
    position: new Cesium.CallbackProperty(() => {
      return cartesian3;
    }, false),
    orientation: Cesium.Transforms.headingPitchRollQuaternion(
      cartesian3,
      headingPitchRoll
    ),
    model: {
      uri: 'http://127.0.0.1:5501/car/scene.gltf',
      show: new Cesium.CallbackProperty(() => {
        return entityIndexs === carModelData.length - 1;
      }, false),
      color: Cesium.Color.CORAL,
      scale: 75,
      scaleByDistance,
      distanceDisplayCondition,
    },
  });
}
function changeCarPosition(position) {
  cartesian3 = Cesium.Cartesian3.fromDegrees(
    position.longitude,
    position.latitude,
    0.4
  );
}