Resolved: How to draw a gizmo in CesiumJS


How to draw a gizmo by giving it a position, orientation and eventually a scale in a CesiumJS application?
By gizmo I mean a 3-axes right-handed reference frame using (x,y,z) vectors, ideally depicted as (RGB) values, such as these, for example:
enter image description here enter image description here enter image description here
I wish I could depict the orientation of any object (e.g. a glTF) by placing such reference frame, for example, at the position of the object origin (e.g. using its longitude, latitude and elevation) and following its orientation, as defined by its heading, pitch and roll values which must follow the three given angles in their original order (heading first, pitch second and roll third) starting from the LTP-ENU (0,0,0) convention (x=0=east, y=0=north, z=0=upward).
The inspector is not an option.


You can use DebugModelMatrixPrimitive.
Here ‘s Sandcastle
Sample code
const viewer = new Cesium.Viewer("cesiumContainer");

const position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0);

const redSphere = viewer.entities.add({
    name: "Red sphere with black outline",
    position: position,
    ellipsoid: {
        radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
        material: Cesium.Color.RED.withAlpha(0.5),
        outline: true,
        outlineColor: Cesium.Color.BLACK,

const heading = Cesium.Math.toRadians(10);
const pitch = Cesium.Math.toRadians(50);
const roll = Cesium.Math.toRadians(0);

const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);

const frame = Cesium.Transforms.headingPitchRollToFixedFrame(position, hpr);

viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
    modelMatrix: frame,
    length: 800000,
    width: 3.0


If you have better answer, please add a comment about this, thank you!