如何在CesiumJS中绘制gizmo

Question

如何通过在CesiumJS应用程序中给它一个位置、方向和最终的比例来绘制一个gizmo？

所谓gizmo，我指的是使用(x，y，z)向量的三轴右转参考框架，理想地将其描述为(RGB)值，例如：

​

​

我希望我能够通过放置这样的参考框架来描述任何物体(例如，glTF)的方向，例如，放置在物体原点的位置(例如使用它的经度、纬度和海拔)，并遵循其航向、俯仰和滚转值所定义的方向，该值必须遵循三个给定的角度(标题第一、第二和第三卷)，从LTP-ENU (0,0,0)公约 (x=0=east、y=0=north、z=0=upward)开始。

审查员不是一个选择。

Answer 1

您可以使用DebugModelMatrixPrimitive。

这里是沙堡

样本代码

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