I’m trying to set up a system to allow a user to place objects in my scene.
Before I explain anything I’ll preface by pointing to the snippet of code that can be found below and run in the sandcastle to demonstrate the issue.
The first click will set the position and the second click will set the angle of rotation. To display the angle to the user, I have one polyline that goes from the selected position straight north, and another polyline that has one point on the selected position and the other attached to the mouse.
When I am moving the mouse around, the polyline attached to the mouse only updates when the mouse slows down or stops moving, giving it a shutter effect, yet the label updates constantly. What can I do to have the polyline update smoothly with the mouse?
I’m also curious why the angle measurement goes from -90 to 270 degrees and not 0 to 360?
var viewer = new Cesium.Viewer(‘cesiumContainer’);
var scene = viewer.scene;
var ellipsoid = scene.globe.ellipsoid;
var entity = viewer.entities.add({
label: {
show: false
}
});
var entitytwo = viewer.entities.add({
polyline: {
show: false,
width: 2,
material: Cesium.Color.YELLOW
}
});
var entitythree = viewer.entities.add({
polyline: {
show: false,
width: 1,
material: Cesium.Color.YELLOW
}
});
var lla = ,
stage = 0,
degree = 0,
cartesian,
cartographic,
cartographictwo;
var positionHandler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
positionHandler.setInputAction(function (movement) {
if (stage === 0) {
cartesian = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesian) {
cartographic = ellipsoid.cartesianToCartographic(cartesian);
var longitudeString = Cesium.Math.toDegrees(cartographic.longitude).toFixed(4);
var latitudeString = Cesium.Math.toDegrees(cartographic.latitude).toFixed(4);
entity.position = cartesian;
entity.label.show = true;
entity.label.text = ‘(’ + longitudeString + ', ’ + latitudeString + ‘)’;
} else {
entity.label.show = false;
}
}else if (stage === 1){
var cartesiantwo = scene.camera.pickEllipsoid(movement.endPosition, ellipsoid);
if (cartesiantwo) {
cartographictwo = ellipsoid.cartesianToCartographic(cartesiantwo);
var dlat = cartographictwo.latitude - cartographic.latitude;
var dlon = cartographictwo.longitude - cartographic.longitude;
degree = Cesium.Math.toDegrees(Math.PI / 2.0 - Math.atan2(dlat, dlon));
entity.position = cartesiantwo;
entity.label.show = true;
entity.label.text = '(Rotation: ’ + degree + ‘)’;
entitytwo.polyline.positions = [cartesian, cartesiantwo];
entitytwo.polyline.show = true;
entitythree.polyline.positions = Cesium.Cartesian3.fromDegreesArray([lla[0], lla[1], lla[0], 90]);
entitythree.polyline.show = true;
} else {
entity.label.show = false;
}
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
positionHandler.setInputAction(function (click) {
if (stage === 0) {
cartesian = scene.camera.pickEllipsoid(click.position, ellipsoid);
if (cartesian) {
cartographic = ellipsoid.cartesianToCartographic(cartesian);
lla = [
Cesium.Math.toDegrees(cartographic.longitude),
Cesium.Math.toDegrees(cartographic.latitude),
Cesium.Math.toDegrees(cartographic.height)
];
var positions = [cartographic.longitude, cartographic.latitude];
stage = 1;
entity.label.show = false;
}
}else if (stage === 1) {
positionHandler = positionHandler && positionHandler.destroy();
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
``