Thank you so much for that link. I have made some progress from it, but have hit another road block.
From the link I found about the MetadataGranularities demo that showed me how to actually implement metadata into a tileset. I managed to load it and using the getProperty function was able to see my data.
The problems come when I try to interact with it.
I would have proffered another approach, but what worked was splitting the model into different .gltf files and loading them via the tileset.json file. Here is my input handler
useEffect(() => {
if (viewerRef.current && cesiumLoaded) {
const handler = new Cesium.ScreenSpaceEventHandler(viewerRef.current.scene.canvas);
handler.setInputAction((click) => {
console.log("click", click);
const feature = viewerRef.current.scene.pick(click.position);
console.log("feature", feature);
const metadata = feature?.content?.metadata;
const propertyKeys = metadata.getPropertyIds();
if (!Cesium.defined(propertyKeys)) {
return `(No properties for ${title})<br>`;
}
for (let i = 0; i < propertyKeys.length; ++i) {
const propertyKey = propertyKeys[i];
const propertyValue = metadata.getProperty(propertyKey);
console.log(`Property ${propertyKey}: ${propertyValue}`);
if (propertyKey === "EMBED_ID" && propertyValue === "AP_1" && feature.detail.model instanceof Cesium.Model) {
feature.detail.model.show = false;
}
if (propertyKey === "EMBED_ID" && propertyValue === "AP_3" && feature.detail.model instanceof Cesium.Model) {
feature.detail.model.color = Cesium.Color.RED.withAlpha(0.5);
}
}
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);
}
}, [viewerRef, cesiumLoaded]);
Getting data is mostly copied from MetadataGranularities, showing and hiding works fine as well. The problem is color change.
The whole model is red except the other boxes. I tried moving the main building to the children. Gave All the boxes different materials. Did not help. I am probably missing something simple but any help is again appreciated. Here is also the tilset.json file.
{
"asset": {
"version": "1.1"
},
"schema": {
"id": "MetadataGranularitiesSchema",
"classes": {
"exampleTilesetMetadataClass": {
"name": "Example tileset metadata class",
"description": "An example metadata class for a tileset",
"properties": {
"author": {
"description": "The person or entity that made the tileset",
"type": "STRING"
},
"date": {
"description": "Date of tileset creation in YYYY-MM-DD format",
"type": "STRING"
},
"tileCount": {
"description": "Total number of tiles in the tileset",
"type": "SCALAR",
"componentType": "UINT8"
}
}
},
"exampleContentMetadataClass": {
"name": "Example content metadata class",
"description": "An example metadata class for tile content",
"properties": {
"vertices": {
"description": "The number of vertices in the geometry",
"type": "SCALAR",
"componentType": "UINT32"
},
"materials": {
"description": "The number of materials in the geometry",
"type": "SCALAR",
"componentType": "UINT16"
},
"EMBED_ID": {
"description": "The ID of the embedded content",
"type": "STRING"
}
}
}
}
},
"metadata": {
"class": "exampleTilesetMetadataClass",
"properties": {
"author": "kufte",
"date": "2022-03-21",
"tileCount": 4
}
},
"geometricError": 1024.0,
"root": {
"boundingVolume": {
"box": [
-0.09187438759488487,
-1.517003756270105,
14.057015091269651,
16.39972686767578,
0,
0,
0,
22.785051345825195,
0,
0,
0,
14.057022094726562
]
},
"children": [
{
"boundingVolume": {
"box": [
-0.09187438759488487,
-1.517003756270105,
14.057015091269651,
16.39972686767578,
0,
0,
0,
22.785051345825195,
0,
0,
0,
14.057022094726562
]
},
"geometricError": 0.0,
"contents": [
{
"uri": "main.gltf",
"metadata": {
"class": "exampleContentMetadataClass",
"properties": {
"vertices": 1032,
"materials": 5,
"EMBED_ID": "MAIN_BUILDING"
}
}
}
]
},
{
"boundingVolume": {
"box": [
-1.7400835752487183,
-9.263010025024414,
18.2625732421875,
5.031312942504883,
0.0,
0.0,
0.0,
4.385226249694824,
0.0,
0.0,
0.0,
1.6762657165527344
]
},
"geometricError": 0.0,
"contents": [
{
"uri": "AP_1.gltf",
"metadata": {
"class": "exampleContentMetadataClass",
"properties": {
"vertices": 1032,
"materials": 5,
"EMBED_ID": "AP_1"
}
}
}
]
},
{
"boundingVolume": {
"box": [
-1.7400835752487183,
-9.263010025024414,
14.630585670471191,
5.031312942504883,
0.0,
0.0,
0.0,
4.385226249694824,
0.0,
0.0,
0.0,
1.676264762878418
]
},
"geometricError": 0.0,
"contents": [
{
"uri": "AP_2.gltf",
"metadata": {
"class": "exampleContentMetadataClass",
"properties": {
"vertices": 1032,
"materials": 5,
"EMBED_ID": "AP_2"
}
}
}
]
},
{
"boundingVolume": {
"box": [
-1.7400836944580078,
1.659614086151123,
11.089048385620117,
7.426226615905762,
0.0,
0.0,
0.0,
5.828481197357178,
0.0,
0.0,
0.0,
1.676264762878418
]
},
"geometricError": 0.0,
"contents": [
{
"uri": "AP_3.gltf",
"metadata": {
"class": "exampleContentMetadataClass",
"properties": {
"vertices": 1032,
"materials": 5,
"EMBED_ID": "AP_3"
}
}
}
]
}
]
}
}
)