Translate CircleGeometry

CesiumJS
1

Hello, I'm displaying radar data on a CircleGeometry using custom materials, but I'm having issues translating the position of the CircleGeometry.

I'm trying to have the circle move around the map by vehicle coordinates (lat/lon). How do I move the center point of the CircleGeometry? The only property I saw available was modelMatrix on the Primitive, but so far any attempts at changing that puts the CircleGeometry in space.

Thanks!

2

Here's an example. I copied the code from the "Moving Dome" post and changed it to a CircleGeometry instead of a SphereGeometry. Just click the moveCircle button and you'll see that the circle jumps into space, instead of just moving to where I want it to go on the globe.

require(['Cesium'], function(Cesium) {
    "use strict";
    
    var viewer = new Cesium.Viewer('cesiumContainer');
    var scene = viewer.scene;
    var primitives = scene.primitives;
    var ellipsoid = viewer.centralBody.ellipsoid;

    var positionOnEllipsoid = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0, 40.0, 0.0));

    var circleGeometry = new Cesium.CircleGeometry({
        center : positionOnEllipsoid,
        radius : 90000.0
    });
    var circleInstance = new Cesium.GeometryInstance({
        geometry : circleGeometry,
        id : 'circle',
        attributes : {
            color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.4))
        }
    });
    
    // Add sphere instance to primitives
    var circlePrimitive = new Cesium.Primitive({
        geometryInstances : circleInstance,
        appearance : new Cesium.PerInstanceColorAppearance({
            translucent : true
        })
    });

    primitives.add(circlePrimitive);
    
    function moveDome(circlePrimitive){
        var cartesianPosition = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-102.0, 50.0, 0.0));
        
        var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cartesianPosition);
        circlePrimitive.modelMatrix = modelMatrix;
    }
    
    Sandcastle.addToolbarButton('moveCircle', function() {
        moveDome(circlePrimitive);
     });

    Sandcastle.finishedLoading();
});

3

The problem with changing the model matrix in the same way as the dome is that the circle isn’t at the center of its reference frame. The translation to the surface of the earth is “built-in” to the vertex data. If you want to move the circle using a model matrix, you need to first translate it the the center of the reference frame, then to the new center.

Note that this may not be exactly what you expect. When the circle is created at the initial center, all points of the circle are scaled to the surface about the center. When you translate it to a new center, the points may be above or below the surface.

Here’s your modified example:

require([‘Cesium’], function(Cesium) {

“use strict”;

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

var primitives = scene.primitives;

var ellipsoid = viewer.centralBody.ellipsoid;

var positionOnEllipsoid = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-100.0, 40.0, 0.0));

var circleGeometry = new Cesium.CircleGeometry({

center : positionOnEllipsoid,

radius : 90000.0

});

var circleInstance = new Cesium.GeometryInstance({

geometry : circleGeometry,

id : ‘circle’,

attributes : {

color : Cesium.ColorGeometryInstanceAttribute.fromColor(new Cesium.Color(1.0, 0.0, 0.0, 0.4))

}

});

// Add sphere instance to primitives

var circlePrimitive = new Cesium.Primitive({

geometryInstances : circleInstance,

appearance : new Cesium.PerInstanceColorAppearance({

translucent : true

})

});

primitives.add(circlePrimitive);

var inverseModelMatrix = Cesium.Matrix4.inverseTransformation(Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid));

function moveDome(circlePrimitive){

var cartesianPosition = ellipsoid.cartographicToCartesian(Cesium.Cartographic.fromDegrees(-102.0, 50.0, 0.0));

var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(cartesianPosition);

circlePrimitive.modelMatrix = Cesium.Matrix4.multiply(modelMatrix, inverseModelMatrix);

}

Sandcastle.addToolbarButton(‘moveCircle’, function() {

moveDome(circlePrimitive);

});

Sandcastle.finishedLoading();

});

Regards,

Dan

4

Ah thanks! I didn't think of trying an inverse transform.