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