Add billboard in 3D scene with terrain

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);

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.

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);