Change from Billboard to Model?

CesiumJS
1

I have the following event handler, I'd like to be able to zoom in on a model when the item is double-clicked. Overall my app displays thousands of entities, so I'm using billboards with the intent that if one is selected then switch to more details by swapping the billboard for a model...
...
entities.add({
  id : eventJson.ident,
  position : pos,
  orientation : orient,
  billboard: { image: '2dBuilding.png',
                width : 18,
                height : 18 },
  name : 'Name'
});
...

var lastBillboard;
handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
    var pickedObject = scene.pick(click.position);
    if (Cesium.defined(pickedObject)) {
        console.log(pickedObject.id.id);
        lastBillboard = pickedObject.id.billboard;
        pickedObject.id.billboard.image = undefined;

        pickedObject.id.model = new Cesium.Model({
           uri : '3dBuilding.gltf',
           minimumPixelSize : 23 });
        console.log('\n\n\nPICKED ENTITY %s\n\n\n', pickedObject.id.name );
        
    }
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

The above has the peculiar effect of changing the orientation of all entities.

I tried using both a billboard and a model on the add() but this defaulted to displaying the models only (costly/slower)

Any help would be greatly appreciated! :wink:

Cheers,
Ian

2

Hi Ian,

I’m having trouble reproducing your problem. Could you possibly create a short Sandcastle example to show what is happening?

Thanks!

Hannah

3

Thanks for your help Hannah...

var viewer = new Cesium.Viewer('cesiumContainer');
var scene = viewer.scene;
var facilityUrl = '../images/facility.gif';

viewer.entities.add({
    position : Cesium.Cartesian3.fromDegrees(-80.50, 35.14),
    name : 'facility',
    billboard : {
        image : facilityUrl
    }
});

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction( function( click ) {
    var pickedObject = scene.pick( click.position );
    if( Cesium.defined( pickedObject )) {
        
        console.log( pickedObject.id.id );
        pickedObject.id.billboard.image.show = false; // doesn't seem to do anything

        pickedObject.id.model = new Cesium.Model({
            // no mil truck displayed :frowning:
           uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb',
           show : true,
           minimumPixelSize : 90 });
        
    }
}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

4

Great, thanks. It looks like you have a few errors in your handler. You need to set billboard.show = false, and instead of passing in a model you just need to pass in an object. The entity layer takes care of creating the model.
Here is the updated example:

handler.setInputAction( function( click ) {
var pickedObject = scene.pick( click.position );
if( Cesium.defined( pickedObject )) {
pickedObject.id.billboard.show = false; // doesn’t seem to do anything

    pickedObject.id.model = {
        uri : '../../SampleData/models/CesiumAir/Cesium_Air.glb',
        minimumPixelSize : 128,
        maximumScale : 20000
    };
   
}

}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

``

Best,

Hannah

5

Hannah, you're THE BEST. Thanks, you made my day! :wink:

Cheers,
Ian