Hello!I can use the following code to highlight a glb model that contains multiple individual buildings. This will highlight the entire glb model, as shown in the picture. However, I want to highlight only a part of this glb model. The glb model is a combination of multiple OBJ files imported into Blender and exported. How can I achieve this? By the way, how can I implement clicking on a model and displaying a property box? Should I add extra information during the model construction?
Cesium.Ion.defaultAccessToken = ***
var viewer = new Cesium.Viewer('cesiumContainer',{
infoBox: true,
});
var tileset;
async function loadTileset() {
tileset = await Cesium.Cesium3DTileset.fromUrl('./root_0330_2_glb_notileset/root/tileset.json',{allowPicking: true});
tileset.preferFlatPrimitives = true;
viewer.scene.primitives.add(tileset);
}
loadTileset().then(() => {
console.log('Tileset success');
viewer.zoomTo(tileset);
}).catch((error) => {
console.error('Tileset failed', error);
});
var highlighted = {
feature: undefined,
originalColor: new Cesium.Color()
};
viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(
movement
) {
if (Cesium.defined(highlighted.feature)) {
const content = highlighted.feature.content;
if (Cesium.defined(content) && content instanceof Cesium.Model3DTileContent) {
console.log('get origin color');
const style = new Cesium.Cesium3DTileStyle({
color: "color('rgba(255,255,255,1)')"
});
content.applyStyle(style);
}
highlighted.feature = undefined;
}
const pickedObject = viewer.scene.pick(movement.position);
console.log('pickedObject:');
console.log(pickedObject);
if (Cesium.defined(pickedObject)) {
highlighted.feature = pickedObject;
const content = pickedObject.content;
if (!Cesium.defined(content)) {
return;
}
if (!(content instanceof Cesium.Model3DTileContent)) {
return;
}
const style = new Cesium.Cesium3DTileStyle({
color: "color('yellow')"
});
content.applyStyle(style);
//return;
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);