What is the correct way to convert screen coordinates to Cartesian3

CesiumJS
1

Hello!

Imagine I want to put a model at the place, where the user clicks.

How do I convert mouse coordinates to Cartesian3 coordinates?

I tried following approaches and none of them works.

1)
    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function(movement) {
      var cartesianCoordinates = Cesium.Cartesian3.clone(movement.position);
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

2)

var handler = new Cesium.ScreenSpaceEventHandler(canvas);
    handler.setInputAction(function(movement) {
    var canvas = viewer.canvas;
      var cartesianCoordinates = new Cesium.Cartesian3(
                    movement.position.x / canvas.clientWidth,
                    movement.position.y / canvas.clientHeight,
                    0.
                );
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

3)

    var handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
    handler.setInputAction(function(movement) {
    var canvas = viewer.canvas;
      var cartesianCoordinates = new Cesium.Cartesian3(
                    movement.position.x / canvas.clientWidth,
                    - movement.position.y / canvas.clientHeight,
                    0.);
    }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

So how do I it correctly?

Thanks in advance

Dmitri Pisarenko

2

Hello Dmitri,

You need to use Camera.pickEllipsoid to get the globe position.

Take a look at our picking demo: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Picking.html&label=Showcases

The first example uses pickEllipsoid to get the Cartesian3 position for displaying a label with the longitude and latitude coordinates.

Best,

Hannah

3

Hello, Hannah!

Many thanks for your answer, now it works.

Best regards

Dmitri Pisarenko