Gizmo, move, scale, rotate an entity

I am developing a custom gizmo. I have placed x,y,z lines according to entity orientation successfully:

           var rotationMatrix = Cesium.Matrix3.fromQuaternion(
				entity.orientation._value
			);
			// 10 here is the distance to push the point away from the origin of the vehicle
			var offsetVectorX = new Cesium.Cartesian3(size, 0, 0);
			var offsetVectorY = new Cesium.Cartesian3(0, size, 0);
			var offsetVectorZ = new Cesium.Cartesian3(0, 0, size);
			// Apply the orientation to this vector
			offsetVectorX = Cesium.Matrix3.multiplyByVector(
				rotationMatrix,
				offsetVectorX,
				offsetVectorX
			);
			offsetVectorY = Cesium.Matrix3.multiplyByVector(
				rotationMatrix,
				offsetVectorY,
				offsetVectorY
			);
			offsetVectorZ = Cesium.Matrix3.multiplyByVector(
				rotationMatrix,
				offsetVectorZ,
				offsetVectorZ
			);
			// Offset the dot's position by the computed vector
			var newPositionX = entity.position
				.getValue(viewer.clock.currentTime)
				.clone();

			Cesium.Cartesian3.add(newPositionX, offsetVectorX, newPositionX);

			viewer.entities.add({
				id: "moveX",
				//name: "Gizmo",
				polyline: {
					positions: [Cesium.Cartesian3.fromElements(x, y, z), newPositionX],
					width: width,
					material: Cesium.Color.RED,
					arcType: 0,
				},
			});

Now I want to place 2 circles also along x,y axis. How can a rotate a circle according to orientation of entity.

I can show one circle along x axis, but how to show along y and z axis? How to set modelMatrix?

          if (entity) {
			let x = entity.position._value.x;
			let y = entity.position._value.y;
			let z = entity.position._value.z;

			var rotationMatrix = Cesium.Matrix3.fromQuaternion(
				entity.orientation._value
			);

			let cartographic = Cesium.Cartographic.fromCartesian(
				entity.position._value
			);

			var ellipse = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
				{
					semiMinorAxis: size,
					semiMajorAxis: size,
					rotation: 0,
					center: Cesium.Cartesian3.fromElements(x, y, z),
					granularity: Cesium.Math.RADIANS_PER_DEGREE,
				},
				false,
				true
			);
			var outerPositions = Cesium.Cartesian3.unpackArray(
				ellipse.outerPositions
			);

			var ellipse2 = Cesium.EllipseGeometryLibrary.computeEllipsePositions(
				{
					semiMinorAxis: size - width,
					semiMajorAxis: size - width,
					rotation: 0,
					center: Cesium.Cartesian3.fromElements(x, y, z),
					granularity: Cesium.Math.RADIANS_PER_DEGREE,
				},
				false,
				true
			);
			var innerPositions = Cesium.Cartesian3.unpackArray(
				ellipse2.outerPositions
			);

			const polygonWithHole = new Cesium.PolygonGeometry({
				polygonHierarchy: new Cesium.PolygonHierarchy(outerPositions, [
					new Cesium.PolygonHierarchy(innerPositions),
				]),
				height: cartographic.height,
			});
			const geometry = Cesium.PolygonGeometry.createGeometry(polygonWithHole);

			const circleInstance = new Cesium.GeometryInstance({
				geometry: geometry,
				/*modelMatrix: Cesium.Matrix4.multiplyByTranslation(
					.............
				),*/
				attributes: {
					color: Cesium.ColorGeometryInstanceAttribute.fromColor(
						new Cesium.Color(1.0, 0.0, 0.0, 0.5)
					),
				},
				id: "rotateX",
			});
			const primitive = new Cesium.Primitive({
				geometryInstances: circleInstance,
				appearance: new Cesium.PerInstanceColorAppearance({
					translucent: true,
					closed: true,
				}),
			});
			viewer.scene.primitives.add(primitive);
		}

Hi there,

I’m not sure this is (easily) possible with the ellipse geometry. The Cesium ion SDK implements a similar widget, but uses a custom primitive using PolylineGeometry.