Selection Issue with GLB Model Organized by Tileset.json

[HerculesJL]

Hello! While I'm able to load b3dm models organized by tileset.json and select one model to highlight it using the code, I encounter a failure in the pick operation when using glb models. How can I resolve this issue?

 Cesium.Ion.defaultAccessToken = '***';
        var viewer = new Cesium.Viewer('cesiumContainer');
        var tileset;
        async function loadTileset() {
            tileset = await Cesium.Cesium3DTileset.fromUrl('./root_/tileset.json');
            viewer.scene.primitives.add(tileset);
        }
        loadTileset().then(() => {
            console.log(success');
            viewer.zoomTo(tileset);
        }).catch((error) => {
            console.error('failed', error);
        });
        var highlighted = {
            feature: undefined,
            originalColor: new Cesium.Color()
        };

        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            var pickedObject = viewer.scene.pick(movement.endPosition);
            console.log('pickedObject::')
            console.log(pickedObject)
            if (Cesium.defined(pickedObject) && pickedObject.primitive == tileset) {

                if (Cesium.defined(highlighted.feature)) {
                    highlighted.feature.color = highlighted.originalColor;
                }
                highlighted.feature = pickedObject;
                highlighted.originalColor = Cesium.Color.clone(pickedObject.color);
                pickedObject.color = Cesium.Color.YELLOW;
                pickedObject.color.red = 1.0;
                pickedObject.color.alpha = 0.5;
                console.log('pickedObject2::')
                console.log(pickedObject)
                console.log(pickedObject.color);
            } 

[javagl]

This repository is for the 3D Tiles format specification. Issues here should be about the specification itself. If you have questions about rendering (3D Tiles) with CesiumJS, you should ask them in the CesiumJS section of the Cesium Community Forum.

---

But to at least try to give a first hint: Just assigning a color to a picked object will not change the color of a rendered object. What you are trying to accomplish can probably be done with styling. A basic example is shown here:

viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  const pickedObject = viewer.scene.pick(movement.endPosition);
  console.log('pickedObject:');
  console.log(pickedObject);
  if (!Cesium.defined(pickedObject)) {
    return;
  }
  const content = pickedObject.content;
  if (!Cesium.defined(content)) {
    return;
  }
  if (!(content instanceof Cesium.Model3DTileContent)) {
    return;
  }
  const style = new Cesium.Cesium3DTileStyle({
    color: "color('red')"
  });
  content.applyStyle(style);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

It will apply the given style (which just colors an object in 'red') to the elements that you are hovering with the mouse. Further examples of styling can be found in the Sandcastle at https://sandcastle.cesium.com/index.html?src=3D%20Tiles%20Feature%20Styling.html . More detailed or specific questions should be discussed in the forum.

[HerculesJL]

This repository is for the 3D Tiles format specification. Issues here should be about the specification itself. If you have questions about rendering (3D Tiles) with CesiumJS, you should ask them in the CesiumJS section of the Cesium Community Forum.

But to at least try to give a first hint: Just assigning a color to a picked object will not change the color of a rendered object. What you are trying to accomplish can probably be done with styling. A basic example is shown here:

viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
  const pickedObject = viewer.scene.pick(movement.endPosition);
  console.log('pickedObject:');
  console.log(pickedObject);
  if (!Cesium.defined(pickedObject)) {
    return;
  }
  const content = pickedObject.content;
  if (!Cesium.defined(content)) {
    return;
  }
  if (!(content instanceof Cesium.Model3DTileContent)) {
    return;
  }
  const style = new Cesium.Cesium3DTileStyle({
    color: "color('red')"
  });
  content.applyStyle(style);

}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

It will apply the given style (which just colors an object in 'red') to the elements that you are hovering with the mouse. Further examples of styling can be found in the Sandcastle at https://sandcastle.cesium.com/index.html?src=3D%20Tiles%20Feature%20Styling.html . More detailed or specific questions should be discussed in the forum.

thank you very much!