Hi,
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.
Regards,
Cihan
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);
``
Best,
-Hannah
Thank you Hannah. Works perfectly.
Regards,
Cihan