Wall Dragging Latency


I am trying to control the position of a wall by dragging two attached pins, i.e. billboards. Billboards follow the mouse movements just fine. However the Wall follows the mouse movements with a variable latency. The latency increases with faster mouse movements.

Is there any remedy for this issue?

The source code below is a sandcastle demonstration of the issue.

Thank you four your time.



Hello Cihan,

The wall is lagging because the geometry is being computed in a web worker. This is because the entity collection thinks the wall is going to be static since it has all static properties. To get around this, we can use a CallbackProperty for the positions argument to let the entity collection know it is going to be changing so it computes the geometry asynchronously. I created a new function called getWallPositions, and I set the wall positions argument to a new CallbackProperty that calls that function. I’ve pasted the entire code below:

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

var pinBuilder = new Cesium.PinBuilder();

var pin1 = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(-107.0, 43.0, 100000.0),

billboard: {

image: new Cesium.ConstantProperty(pinBuilder.fromText(“1”,Cesium.Color.DARKGREEN, 48)),

verticalOrigin: Cesium.VerticalOrigin.BOTTOM



var pin2 = viewer.entities.add({

position: Cesium.Cartesian3.fromDegrees(-97.0, 43.0, 100000.0),

billboard: {

image: new Cesium.ConstantProperty(pinBuilder.fromText(“2”,Cesium.Color.DARKGREEN, 48)),

verticalOrigin: Cesium.VerticalOrigin.BOTTOM



function getWallPositions() {

return [pin1.position.getValue(0), pin2.position.getValue(0)];


var wall = viewer.entities.add({

wall : {

positions : new Cesium.CallbackProperty(getWallPositions, false),

material : Cesium.Color.GREEN.withAlpha(0.5),

outline : true,

outlineColor : Cesium.Color.WHITE



var dragging = null;

var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);

handler.setInputAction(function(click) {

var pickedObject = viewer.scene.pick(click.position);

if (pickedObject) pickedObject = pickedObject.id;

if (pickedObject != undefined && Cesium.defined(pickedObject)) {

dragging = pickedObject;

viewer.scene.screenSpaceCameraController.enableRotate = false;


}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

handler.setInputAction(function() {

if (dragging) {

dragging = false;

viewer.scene.screenSpaceCameraController.enableRotate = true;


}, Cesium.ScreenSpaceEventType.LEFT_UP);

handler.setInputAction(function(movement) {

var ray = viewer.camera.getPickRay(movement.endPosition);

var position = viewer.scene.globe.pick(ray, viewer.scene);

if (!Cesium.defined(position) || !dragging) return;

var positionCartographic = Cesium.Ellipsoid.WGS84.cartesianToCartographic(position);

var latitude = Cesium.Math.toDegrees(positionCartographic.latitude);

var longitude = Cesium.Math.toDegrees(positionCartographic.longitude);

dragging.position = Cesium.Cartesian3.fromDegrees(longitude,latitude,100000);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);




Thank you Hannah. Works perfectly.