
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
}