Skip to content

Instantly share code, notes, and snippets.

@atomize
Forked from mramato/EntityModelColor.js
Created July 17, 2022 18:06
Show Gist options
  • Save atomize/3506d1595a5cbffd27c07e6d12373285 to your computer and use it in GitHub Desktop.
Save atomize/3506d1595a5cbffd27c07e6d12373285 to your computer and use it in GitHub Desktop.
Cesium example of coloring a model loaded with the Entity API
var viewer = new Cesium.Viewer('cesiumContainer', {
infoBox : false,
selectionIndicator : false
});
var entity = viewer.entities.add({
position : Cesium.Cartesian3.fromDegrees(-123, 44, 10),
model : {
uri : '../../../Specs/Data/Models/Box/CesiumBoxTest.gltf',
minimumPixelSize : 128
}
});
viewer.zoomTo(entity, new Cesium.HeadingPitchRange(Math.PI / 4, -Math.PI / 4, 3));
//Change color on mouse over. This relies on the fact that given a primitive,
//you can retrieve an associted en
var lastColor;
var lastPick;
var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction(function(movement) {
var primitive;
var pickedObject = viewer.scene.pick(movement.endPosition);
if (pickedObject) {
primitive = pickedObject.primitive;
if (pickedObject !== lastPick && primitive instanceof Cesium.Model) {
//We don't use the entity here, but if you need to color based on
//some entity property, you can get to that data it here.
var entity = primitive.id;
var material = primitive.getMaterial('Red');
lastColor = material.getValue('diffuse').clone();
material.setValue('diffuse', Cesium.Cartesian4.fromColor(Cesium.Color.BLUE));
lastPick = pickedObject;
}
} else if (lastPick) {
primitive = lastPick.primitive;
var material = primitive.getMaterial('Red');
material.setValue('diffuse', lastColor);
lastPick = undefined;
}
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
//Ability to look up the Model associated with an entity
function getModelForEntity(entity) {
var primitives = viewer.scene.primitives;
for (var i = 0; i < primitives.length; i++) {
var primitive = primitives.get(i);
if (primitive instanceof Cesium.Model && primitive.id === entity) {
return primitive;
}
}
};
//Makes an entity model a random color.
Sandcastle.addToolbarButton('Make random color', function() {
var model = getModelForEntity(entity);
if (model) {
var material = model.getMaterial('Red');
material.setValue('diffuse', Cesium.Cartesian4.fromColor(Cesium.Color.fromRandom()));
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment