Adjusting height of Billboard

CesiumJS
1

I am trying to allow the user to click and drag on a marker to adjust its height (while keeping the long/lat)

The referencePosition stores the cartesian of when the user first starts the mouse drag, and then as they continue to drag along the terrain the height is of that terrain level.

My issue is that this doesn't work with Cartesian, the long and lat positions change because I'm just adding the rayPosition to the Z of the cartesian, I think I need to use surface normals but I'm not sure how.

var handler = new Cesium.ScreenSpaceEventHandler(_self._scene.canvas);
                        handler.setInputAction(function(movement) {

                            var ray = _self._scene.camera.getPickRay(movement.endPosition);
                            if (ray != null) {
                                var rayPosition = _self._scene.globe.pick(ray, _self._scene);

                                //Here we set the reference position the first time, this will be referenced repeatedly. Set once.
                                if (referencePosition === undefined || referencePosition === null) {
                                    referencePosition = rayPosition;
                                }

                                var heightFromTerrain = (rayPosition.z > referencePosition.z) ? rayPosition.z : referencePosition.z;

                                //If locked, we make variable
                                var calculatedPosition = Cesium.Cartesian3.fromElements(referencePosition.x, referencePosition.y, heightFromTerrain);

                                if (calculatedPosition) {
                                    onDrag(calculatedPosition);
                                } else {
                                    onDragEnd(calculatedPosition);
                                }
                            }
                        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

2

Hello,

The z coordinate doesn’t correlate to the height from the globe surface. Instead, I think you can accomplish what you’re trying to do by converting the Cartesian3 to a Cartographic position. This way you can get the lat, lon and height of the position.

You can convert to a Cartographic like this:

var referenceCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(referencePosition);
var rayCartographic = viewer.scene.globe.ellipsoid.cartesianToCartographic(rayPosittion);
var height = Math.max(rayCartographic.height, referenceCartographic.height);
…

``

Then you can convert the Cartographic back to a Cartesian3 with:

var cartesianPosition = viewer.scene.globe.ellipsoid.cartographicToCartesian(rayCartographic);

``

Hope this helps!

-Hannah

3

That did it thanks Hannah