in cesiumjs,how to draw the line which is the centeral axis of a frustum?

22 Views Asked by At

screenshot

just the dashed arrow line in the picture, I can draw the frustum with longtitude /latitude/altitude,and the HeadingPitchRoll info , but I have no idea to draw the dashed arrow line. you guys ,have some ideas with that? here is my code to draw a frustum with a real camera's infomations:

drawFrusrum({ lng, lat, alt, head, pitch, roll, fov, aspectRatio }) {
 // draw by the real camera's infomations :fov,ratio of aspect and position of WGS84
const origin = Cesium.Cartesian3.fromDegrees(lng, lat, alt);
const far = 200;
const hpr = new Cesium.HeadingPitchRoll(Cesium.Math.toRadians(head), Cesium.Math.toRadians(pitch), Cesium.Math.toRadians(roll));
const orientation = Cesium.Transforms.headingPitchRollQuaternion(origin, hpr);
const frustum = new Cesium.PerspectiveFrustum({
  fov,
  aspectRatio,
  near: 1.0,
  far
});
if (window.UAVFrusrum) {
  window.viewer.scene.primitives.remove(window.UAVFrusrum);
  window.UAVFrusrum = null;
}
window.UAVFrusrum = new Cesium.Primitive({
  geometryInstances: new Cesium.GeometryInstance({
    geometry: new Cesium.FrustumGeometry({
    frustum,
    origin,
    orientation
    //  vertexFormat: Cesium.VertexFormat.POSITION_ONLY
    }),
    attributes: {
    color: Cesium.ColorGeometryInstanceAttribute.fromColor(
      new Cesium.Color(0.0, 0.65, 0.7, 0.4)
    )
    }
  }),
  appearance: new Cesium.PerInstanceColorAppearance({
  //  closed: true,
  // self defined material
    material: new Cesium.Material({
    fabric: {
      type: 'Color',
      uniforms: {
        color: new Cesium.Color(1.0, 1.0, 0.0, 1.0), 
        glowPower: 0.5 
      },
      components: {
        diffuse: 'color.rgb * (1.0 - glowPower) + color.rgb * glowPower',
        alpha: '1.0'
      }
    }
    })
  })
});
window.viewer.scene.primitives.add(window.UAVFrusrum);
// TODO : to draw the centeral line 

}
0

There are 0 best solutions below