Add billboard in 3D scene with terrain

[Fran Raga]

Hi

I'm trying to add a 3D marker with the terrain loaded, but something strange is happening. When I double click the marker is added displaced and not over where I have the cursor.

I think I'm using the ellipsoid without terrain or I don't know, because the displacement isn't uniform.

Any suggestions?

/**

 * Add Double Click Coordinates.

 */

scene.globe.depthTestAgainstTerrain = true;

canvas.addEventListener('dblclick', function(e) {

    if (viewer.entities.values.length > 1) {

        clearCanvas();

    }

    mousePosition = new Cesium.Cartesian3(e.clientX, e.clientY);

    var ray = scene.camera.getPickRay(mousePosition);

    var pickedPosition = scene.globe.pick(ray, scene);

    if (pickedPosition) {

        pinBuilder = new Cesium.PinBuilder();

        url = Cesium.buildModuleUrl(marker_pin);

        Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.RED, 80), function(canvas) {

            viewer.entities.add({

                name: 'Map marker',

                position: pickedPosition,

                billboard: {

                    image: canvas.toDataURL(),

                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                    disableDepthTestDistance: Number.POSITIVE_INFINITY

                }

            });

            if (viewer.entities.values.length === 2) {

                getRoute()

            }

        });

    } else {

        console.log('Globe was not picked');

    }

}, false);

[Omar Shehata]

I think scene.globe.pick may be returning the ellipsoid position. Try using scene.pickPosition:

https://cesiumjs.org/Cesium/Build/Documentation/Scene.html#pickPosition

This will take in a 2d window position directly. If this doesn't work, can you recreate the issue in a Sandcastle example (https://cesiumjs.org/Cesium/Apps/Sandcastle/index.html) and share it here? That way I can easily reproduce the issue.

[Fran Raga]

Amazing! fixed using  scene.pickPosition.

the final code is:

 /**

 * Add Double Click Coordinates.

 */

scene.globe.depthTestAgainstTerrain = true;

canvas.addEventListener('dblclick', function(e) {

    if (viewer.entities.values.length > 1) {

        clearCanvas();

    }

    mousePosition = new Cesium.Cartesian3(e.clientX, e.clientY);

    var ray = scene.camera.getPickRay(mousePosition);

    var pickedPosition = scene.pickPosition(ray, scene);

    if (pickedPosition) {

        pinBuilder = new Cesium.PinBuilder();

        url = Cesium.buildModuleUrl(marker_pin);

        Cesium.when(pinBuilder.fromUrl(url, Cesium.Color.RED, 80), function(canvas) {

            viewer.entities.add({

                name: 'Map marker',

                position: pickedPosition,

                billboard: {

                    image: canvas.toDataURL(),

                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

                    heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

                    disableDepthTestDistance: Number.POSITIVE_INFINITY

                }

            });

            if (viewer.entities.values.length === 2) {

                getRoute()

            }

        });

    } else {

        console.log('Globe was not picked');

    }

}, false);

Francisco Raga | Full-Stack Open Source GIS Developer 

    

Móvil: (+34) 654275432 | e-Mail: frank...@gmail.com | skype: francisco_raga
Github: https://goo.gl/ydNTjY | Linkedin: https://goo.gl/TCfj8S | Site: https://goo.gl/qiypDj

"La vida real no tiene ningún mapa.."  Ivy Compton Burnett

--
You received this message because you are subscribed to a topic in the Google Groups "cesium-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/cesium-dev/_zdtYHEBXVI/unsubscribe.
To unsubscribe from this group and all its topics, send an email to cesium-dev+...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/cesium-dev/83313900-164d-44b5-b533-a9356f095092%40googlegroups.com.