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

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

为啥每一次从后台拿到数据后要再次调用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  );}

Answer 2

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

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);  }}