Model selection issue.

CesiumJS
1

Hi,

Model selection, selection Indicator and showing the selected item information on InfoBox is not working, when I load the model using Cesium.Model.fromGltf(…). But If I add it to the entities i.e. (viewer.entities.add({…}):wink: The selection and the info box is working.

Find the sandcastle code below.

var viewer = new Cesium.Viewer(‘cesiumContainer’,{

scene3DOnly: true,

infoBox : true,

selectionIndicator : true

});

var scene = viewer.scene;

var height = 5000.0;

var heading = 0.0;

var pitch = Cesium.Math.toRadians(10.0);

var roll = Cesium.Math.toRadians(-20.0);

var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, height);

var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, heading, pitch, roll);

var model = scene.primitives.add(Cesium.Model.fromGltf({

url : ‘…/…/SampleData/models/CesiumAir/Cesium_Air.gltf’,

name: 'CESIUM AIR',

modelMatrix : modelMatrix,

minimumPixelSize : 128,

allowPicking : true

}));

viewer.trackedEntity = model;

model.readyPromise.then(function(model) {

// Play and loop all animations at half-speed

model.activeAnimations.addAll({

speedup : 0.1,

loop : Cesium.ModelAnimationLoop.REPEAT

});

}).otherwise(function(error){

window.alert(error);

});

``

Does anyone have a suggestion what I am doing wrong here?

Regards,

Premkumar.

2

Hello,

Picking to bring up the InfoBox is part of the Entity API. Use that to add your model to the scene.

See this example: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=3D%20Models.html&label=Showcases

Remove infoBox : false, selectionIndicator : false from the top of the file to see the InfoBox show.

Best,

Hannah

3

Hello Hannah,

Thank you for your response.

I want to perform some operation once the model is loaded successfully. So I’m using “readyPromise”. But when I use Entity API I was not able to find the promise.

model.readyPromise.then(function(model) {

// success

}).otherwise(function(error){

// failed

});

Is there any method to find the “readyPromise” in Entity API. Please advice.

Regards,

Premkumar.

4

Ah, yeah, the readyPromise is not available through the Entity API.
Instead, you can create your own InfoBox and click handler.

You’ll have to store the name and description to display in the InfoBox in your model id.

Here is an example:

var viewer = new Cesium.Viewer(‘cesiumContainer’, {infoBox: false});

var infoBoxContainer = document.createElement(‘div’);
infoBoxContainer.className = ‘cesium-viewer-infoBoxContainer’;
viewer.container.appendChild(infoBoxContainer);
var infoBox = new Cesium.InfoBox(infoBoxContainer);
var infoBoxViewModel = infoBox.viewModel;

var scene = viewer.scene;

var origin = Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 0);
var modelMatrix = Cesium.Transforms.headingPitchRollToFixedFrame(origin, 0, 0, 0);

var model = scene.primitives.add(Cesium.Model.fromGltf({
id: {
name: ‘my model name’,
description: ‘my model descriptionl’
},
url : ‘…/…/SampleData/models/CesiumGround/Cesium_Ground.glb’,
modelMatrix : modelMatrix,
minimumPixelSize : 128
}));

var handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function(click) {
var pick = scene.pick(click.position);
var showSelection = false;
var titleText = ‘’;
var description = ‘’;
if (Cesium.defined(pick) && Cesium.defined(pick.node) && Cesium.defined(pick.mesh)) {
showSelection = true;
titleText = (Cesium.defined(pick.id) && Cesium.defined(pick.id.name)) ? pick.id.name : ‘’;
description = (Cesium.defined(pick.id) && Cesium.defined(pick.id.description)) ? pick.id.description : ‘’;
}
infoBoxViewModel.showInfo = showSelection;
infoBoxViewModel.titleText = titleText;
infoBoxViewModel.description = description;

}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

``

Best,

Hannah

5

Hi Hannah,

Thank you for the response. Let me give a try on this.

I’m missing one more functionality, tracking entity.

var model = scene.primitives.add(Cesium.Model.fromGltf({
id: {
name: ‘my model name’,
description: ‘my model descriptionl’
},
url : ‘…/…/SampleData/models/CesiumGround/Cesium_Ground.glb’,
modelMatrix : modelMatrix,
minimumPixelSize : 128
}));

viewer.trackedEntity = model;

``

On double click on the model, we can track the model in Entity API. I’m not able to do that here.

Do you have any work around for this. Please advice.

Regards,

Premkumar.

6

Unfortunately, the code for tracking an entity is a lot more complicated and cannot easily be added for a primitive. If you wanted to try to do your own implementation, you can look at the code here: https://github.com/AnalyticalGraphicsInc/cesium/blob/master/Source/DataSources/EntityView.js

However, it would probably be much easier to change the code to make the readyPromise available from the Entity API than adding tracking to the Primitive API.

You could add a readyPromise property to ModelGraphics and set the value when the new model is created in ModelVisualizer.

Best,

Hannah

7

Thank you for the detailed information. Let me try including the readyPromise property to Entity API.

Regards,

Premkumar