How to draw an upright circle

i use CircleOutlineGeometry function to draw a circle,it’s parallel to the surface;i want to my circle is upright,and the center of circle should be perpendicular to a normal vector that is maked by two geographic coordinates

I can not understand what you are saying : “the center of circle should be perpendicular to a normal vector that is maked by two geographic coordinates”.

But you can arbitrarily change the position and the orientation of the geometry.
You can try changing the modelMatrix of primitive releated to your geometry.

@ZhefengJin
i know i must use modelMatrix of primitive;but it is difficult for me to understand the Matrix transformation;
actually,first,i will draw some lines;and second,on the basis of lines,i draw circles;


like this photo;so i don’t how to chang the modelMatrix to get it;

Center of a circle is a point, a point can’t be perpendicular to anything, but a vector or line can. Perhaps what is meant is that the plane the circle resides in must be perpendicular to the line determined by 2 points, and this line goes through the center of the circle?

@Hyper_Sonic yes,that’s what I mean,haha…

Do ellipses even have modelMatrix? I copied this from
sandcastle.cesium.com/?src=Geometry%20and%20Appearances.html

var viewer = new Cesium.Viewer("cesiumContainer", { infoBox: false });
var i;var height;var test;var entities = viewer.entities;
for (i = 0; i < 5; ++i) {
  height = 200000.0 * i;

test = entities.add({
    position: Cesium.Cartesian3.fromDegrees(-65.0, 35.0),
    ellipse: {
      semiMinorAxis: 200000.0,
      semiMajorAxis: 200000.0,
      height: height,
      material: Cesium.Color.fromRandom({ alpha: 0.5 }),
    },
  });
}
console.log(test);

I have no idea how to draw them vertically.

@Hyper_Sonic thanks, It involves matrix transformations;so i think it’s difficult;Just think about the math,i can do it;but for cesium,i also have no idea about it

Where’s the matrix? In the above code there’s a console.log. Opening up the object that shows up in the console seems to lack one.

EDIT: I was just playing around with ellipsoids (3d version of ellipses) and realized that you can make these super flat like an ellipse, and they have modelMatrix.

Here’s the modified example I was using, modified from
cesium.com/docs/tutorials/geometry-and-appearances/
Can make one of the 3 radii super thin to turn into an ellipse.

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;

var ellipsoidGeometry = new Cesium.EllipsoidGeometry({
    vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
    radii : new Cesium.Cartesian3(300000.0, 200000.0, 150000.0)
});
var orangeEllipsoidGeom = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
modelMatrix :[1,0,0,0, 0,1,0,0, 0,0,1,0, 7600000,0,0,1],
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.ORANGE)
    }
});
var cyanEllipsoidInstanceGeom = new Cesium.GeometryInstance({
    geometry : ellipsoidGeometry,
modelMatrix :[1,0,0,0, 0,0,-1,0, 0,1,0,0, 6900000,0,0,1],
    attributes : {
        color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.CYAN)
    }
});
var orangeEllipsoidPrim = scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [orangeEllipsoidGeom],
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
}));
var cyanEllipsoidPrim = scene.primitives.add(new Cesium.Primitive({
    geometryInstances : [cyanEllipsoidInstanceGeom],
    appearance : new Cesium.PerInstanceColorAppearance({
        translucent : false,
        closed : true
    })
}));
console.log(orangeEllipsoidPrim.modelMatrix);
console.log(cyanEllipsoidPrim.modelMatrix);
//primitives have same Prim matrix, different Geom matrix
//Geom matrix determines what part of a model is forward and what part is up

/*
//For orange
modelMatrix :[1,0,0,0, 0,1,0,0, 0,0,1,0, 7600000,0,0,1], //identity
modelMatrix :[1,0,0,0, 0,0,-1,0, 0,1,0,0, 7600000,0,0,1], //twist 90deg around x
modelMatrix :[0,-1,0,0, 1,0,0,0, 0,0,1,0, 7600000,0,0,1], //twist 90deg around z
modelMatrix :[0,0,-1,0, 0,1,0,0, 1,0,0,0, 7600000,0,0,1], //twist 90deg around y
//For Cyan
modelMatrix :[1,0,0,0, 0,1,0,0, 0,0,1,0, 6900000,0,0,1], //identity
modelMatrix :[1,0,0,0, 0,0,-1,0, 0,1,0,0, 6900000,0,0,1], //twist 90deg around x
modelMatrix :[0,-1,0,0, 1,0,0,0, 0,0,1,0, 6900000,0,0,1], //twist 90deg around z
modelMatrix :[0,0,-1,0, 0,1,0,0, 1,0,0,0, 6900000,0,0,1], //twist 90deg around y
*/

One thing that may be helpful here is looking at how CoplanarPolygonGeometry does it: https://cesium.com/docs/cesiumjs-ref-doc/CoplanarPolygonGeometry.html?classFilter=Cop.

Normally any polygon you create will be parallel to the surface of the Earth. This class was created to allow polygons to be created in any arbitrary plane.

How is the plane defined? 3 points or a normal and a point on the plane? Are there any sandcastle demonstrations?

You just need to define all the vertices of your polygon in 3D space, so if you want a vertical square then two points would be on the ground and two points would be in the air.

The example in the doc appears to be incorrect. I opened a PR here to fix it: https://github.com/CesiumGS/cesium/pull/9091. This contains a Sandcastle of creating a vertical polygon.