# Change from Billboard to Model?

**URL:** <https://community.cesium.com/t/change-from-billboard-to-model/4453>\
**Category:** CesiumJS\
**Created:** [August 3, 2016, 5:34pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453 "2016-08-03T17:34:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![f\_zap](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/f_zap/32/8028_2.png) [@f\_zap](https://community.cesium.com/u/f_zap)\
**Post date:** [August 3, 2016, 5:34pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453/1 "2016-08-03T17:34:51Z")

</div>

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({  
&nbsp;&nbsp;id : eventJson.ident,  
&nbsp;&nbsp;position : pos,  
&nbsp;&nbsp;orientation : orient,  
&nbsp;&nbsp;billboard: { image: '2dBuilding.png',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width : 18,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height : 18 },  
&nbsp;&nbsp;name : 'Name'  
});  
...

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pickedObject.id.model = new Cesium.Model({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri : '3dBuilding.gltf',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimumPixelSize : 23 });  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;console.log('\n\n\nPICKED ENTITY %s\n\n\n', pickedObject.id.name );  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}, 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! 😉

Cheers,  
Ian

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [August 3, 2016, 7:36pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453/2 "2016-08-03T19:36:23Z")

</div>

Hi Ian,

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

> **[Cesium Sandcastle](https://sandcastle.cesium.com/index.html?)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

Thanks!

Hannah

---

<div class="post-metadata">

**Author:** ![f\_zap](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/f_zap/32/8028_2.png) [@f\_zap](https://community.cesium.com/u/f_zap)\
**Post date:** [August 4, 2016, 12:01pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453/3 "2016-08-04T12:01:22Z")

</div>

Thanks for your help Hannah...

> **[Cesium Sandcastle](https://sandcastle.cesium.com/?src=Hello%20World.html&label=Showcases&gist=39ede30903c1fcbc38aa69045c1b2370)**
>
> The Cesium Sandcastle provides an interactive environment for testing Cesium code.

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

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

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

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;pickedObject.id.model = new Cesium.Model({  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// no mil truck displayed ☹  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;uri : '../../SampleData/models/CesiumMilkTruck/CesiumMilkTruck-kmc.glb',  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;show : true,  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;minimumPixelSize : 90 });  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
&nbsp;&nbsp;&nbsp;&nbsp;}  
}, Cesium.ScreenSpaceEventType.LEFT\_DOUBLE\_CLICK);

---

<div class="post-metadata">

**Author:** ![hannah](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/hannah/32/4509_2.png) [@hannah](https://community.cesium.com/u/hannah)\
**Post date:** [August 4, 2016, 1:30pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453/4 "2016-08-04T13:30:35Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![f\_zap](https://sea2.discourse-cdn.com/cesium/user_avatar/community.cesium.com/f_zap/32/8028_2.png) [@f\_zap](https://community.cesium.com/u/f_zap)\
**Post date:** [August 4, 2016, 3:18pm UTC](https://community.cesium.com/t/change-from-billboard-to-model/4453/5 "2016-08-04T15:18:48Z")

</div>

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

Cheers,  
Ian