Line direction issue for camera entities

Hi everyone,

I am facing an issue for the camera entities direction orientation which is represented by white lines in my cesium application.

I am parsing Yaw, Pitch, Roll along with the x , y ,z values for camera direction and position from xml files in my cesium application and then create entities as red dots to represent camera position and white lines for the direction each camera entity is pointing towards. However, for some cases where the line should be pointing downwards towards the terrain based on the Yaw, Pitch, Roll values the line is pointing in a horizontal direction. Below is and example of parsed value and code snippet for your reference.

<Photo>
                    <Id>6876</Id>
                    <ImagePath>https://insite-data2.auav.com.au/AECOM/2020_11_Dams/CataractDam/photos/CataractDam_NADIR_F4_267.jpg</ImagePath>
                    <Component>1</Component>
                    <Pose>
                        <Rotation>
                            <Yaw>159.774222533411</Yaw>
                            <Pitch>-82.9012213707934</Pitch>
                            <Roll>-0.21886954865453</Roll>
                            <Accurate>true</Accurate>
                        </Rotation>
                        <Center>
                            <x>150.803437046221</x>
                            <y>-34.2656057857376</y>
                            <z>337.378822163679</z>
                            <Accurate>true</Accurate>
                        </Center>
                    </Pose>


export function insiteReadCamerasXML(
  projectName,
  XMLfile,
  heightOffset,
  protalSlug,
  _projectId,
  DatasetId,
  entityProcessCallback
) {

function cam() {
    this.image = "";
    this.rot = [0, 0, 0];
    this.pos = [0, 0, 0];
  }

const _url = `tempValue/camera_xml`;
  axiosInstance(_url, "get", {},).then((res) => {
    const _dataObject = _.get(res, "data");
    const data = _dataObject.object;
    let listOfEntities = [];
    let imgPath,Yaw,Pitch,Roll,x,y,z,fov35mmEquiv;
    let camObj = new cam();

    data.map(d =>
    {
      imgPath = d.ImagePath? d.ImagePath : "";
      Yaw = isNaN(d.Yaw) ? 0 : parseFloat(d.Yaw);
      Pitch =  isNaN(d.Pitch) ? 0 : parseFloat(d.Pitch);
      Roll =  isNaN(d.Roll) ? 0 :parseFloat(d.Roll);
      x = isNaN(d.x) ? 0 : parseFloat(d.x);
      y = isNaN(d.y) ? 0 :parseFloat(d.y);
      z = isNaN(d.z) ? 0 :parseFloat(d.z);
      fov35mmEquiv = d.fov35mmEquiv;
      camObj.image = imgPath;
      camObj.rot[0] = Yaw;
      camObj.rot[1] = Pitch;
      camObj.rot[2] = Roll;
      camObj.pos[0] = x;
      camObj.pos[1] = y;
      camObj.pos[2] = z + parseFloat(heightOffset);

      listOfEntities.push({
        image: camObj.image,
        position: Cesium.Cartesian3.fromDegrees(
            camObj.pos[0],
            camObj.pos[1],
            camObj.pos[2]
        ),
        hpr: Cesium.HeadingPitchRoll.fromDegrees(
            camObj.rot[0],
            camObj.rot[1],
            camObj.rot[2]
        ),
        fov35mmEquiv: fov35mmEquiv,
        inSiteType: 'cameraPosition',
        cameraProject: projectName,
        show: false,
        point: {
          pixelSize: 6,
          color: Cesium.Color.RED,
        },
      });
    });

    if (typeof entityProcessCallback === "function") {
      entityProcessCallback.apply(null, [listOfEntities]);
    }

  }).catch(err => {
    console.log("skipping unsolved camera for image");
  });
}


 insiteReadCamerasXML(_tile_name, _cameraXML, _heightOffset,this._reactClass.state.portalSlug,_projectId,id,(listOfEntities) => {
                    if (listOfEntities instanceof Array) {
                        data.photos = listOfEntities;
                        listOfEntities.forEach((item) => {
                            this._viewer.entities.add(item);
                        });
                    }
                });


enableCameraDirections(){
        for (let id in this._viewer.entities.values) {
            let entity = this._viewer.entities.values[id];
            if (entity.hasOwnProperty("inSiteType")) {
                if (entity.inSiteType === "cameraPosition") {
                    if (!isNaN(entity.hpr.heading) && !isNaN(entity.hpr.pitch) && !isNaN(entity.hpr.roll)) {
                        let position = entity.position._value;

                        // Calculate the forward direction from the camera orientation
                        const transform = Cesium.Transforms.headingPitchRollToFixedFrame(position, entity.hpr);
                        const forward = Cesium.Matrix4.getColumn(transform, 1, new Cesium.Cartesian3());
                        const scale = 3; // Adjust this value based on your needs
                        const forwardScaled = Cesium.Cartesian3.multiplyByScalar(forward, scale, new Cesium.Cartesian3());


                        // Add a line indicating the camera orientation
                        const cameraDirection = this._viewer.entities.add({
                            polyline: {
                                positions: [position, Cesium.Cartesian3.add(position, forwardScaled, new Cesium.Cartesian3())],
                                width: 1,
                                material: Cesium.Color.WHITE
                            }
                        });
                        this.cameraDirectionEntity.push(cameraDirection.id);
                    }
                }
            }
        }
    }

console outputs for debugging:

entity.hpr = HeadingPitchRoll {heading: 2.788586243022138, pitch: -1.4468992668450316, roll: -0.003819994256375474}

entity.position._value = Cartesian3 {x: -4606587.075776952, y: 2574171.8557066442, z: -3571037.644503447}

transform = Matrix4 {0: 0.7934736025567247, 1: -0.31055814528341885, 2: 0.5234054646674753, 3: 0, 4: 0.29050528700999273, 5: -0.5624430652489524, 6: -0.774121745316978, 7: 0, 8: 0.5347955873648309, 9: 0.7662972248099854, 10: -0.3560649420872827, 11: 0, 12: -4606587.075776952, 13: 2574171.8557066442, 14: -3571037.644503447, 15: 1}

forward = Cartesian3 {x: 0.29050528700999273, y: -0.5624430652489524, z: -0.774121745316978, w: 0}

forwardScaled = Cartesian3 {x: 0.8715158610299782, y: -1.687329195746857, z: -2.322365235950934}

I am still facing this issue. I would really appreciate some feedback, Thanks.