Search code examples
cesiumjs

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:

Blender Gizmo Gizmo2 Gizmo3

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.

Solution

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

viewer.zoomTo(viewer.entities);