Model instance v2

[rudacs]

Description

When I remove or add an instance without changing the quantity, it ends up not resetting the Draw.
So I replaced the length comparison with a dirty one.

const viewer = new Cesium.Viewer("cesiumContainer");

let model;
try {
  model = await Cesium.Model.fromGltfAsync({
    url: "../../SampleData/models/wind_turbine.glb"
  });
  viewer.scene.primitives.add(model);
} catch (error) {
  console.log(`Failed to load model. ${error}`);
}

const positions = [
  42.77379, -78.28529,
  42.77549, -78.28439
];

let position;

let instanceTransform;
for (let i = 0; i < positions.length; i += 2) {
  const chunk = positions.slice(i, i + 2);
  position = Cesium.Cartesian3.fromDegrees(chunk[1], chunk[0], 0);
  instanceTransform = new Cesium.Transforms.eastNorthUpToFixedFrame(position);
  model.instances.add(instanceTransform);
}

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    950971.9555012125,
    -4592451.1790314745,
    4309468.958291063,
  ),
  orientation: new Cesium.HeadingPitchRoll.fromDegrees(80.61, -7.2, 0.0),
});

function handleSelection(screenPosition) {
  const picked = viewer.scene.pick(screenPosition, 15, 15);
  
  if (!picked) {
    return;
  }
  
  const instance = model.instances.get(picked.instanceId);
  model.instances.remove(instance);

  const position = Cesium.Cartesian3.fromDegrees(-78.2828, 42.77989, 0);
  const instanceTransform = new Cesium.Transforms.eastNorthUpToFixedFrame(position);
  model.instances.add(instanceTransform);
}

const handler = new Cesium.ScreenSpaceEventHandler(viewer.camera.canvas);
handler.setInputAction((click) => handleSelection(click.position), Cesium.ScreenSpaceEventType.LEFT_CLICK);

---

Previously I put the pickId, but it must be private.

---

I also implemented the option to color each instance a different color.
Very useful for indicating selection or hover.
Works in conjunction with the colorBlendMode and colorBlendAmount defined in the model

const viewer = new Cesium.Viewer("cesiumContainer");

let model;
try {
  model = await Cesium.Model.fromGltfAsync({
    url: "../../SampleData/models/wind_turbine.glb",
    //colorBlendMode: Cesium.ColorBlendMode.MIX,
    //colorBlendAmount: 0.3
  });
  viewer.scene.primitives.add(model);
} catch (error) {
  console.log(`Failed to load model. ${error}`);
}

const lng = -75.1652;
const lat = 39.9526;
const positions = [
  42.77989, -78.2828,
  42.77789, -78.2837,
  42.77379, -78.28529,
  42.77549, -78.28439
];

let position;

let instanceTransform;
for (let i = 0; i < positions.length; i += 2) {
  const chunk = positions.slice(i, i + 2);
  position = Cesium.Cartesian3.fromDegrees(chunk[1], chunk[0], 0);
  instanceTransform = new Cesium.Transforms.eastNorthUpToFixedFrame(position);
  const inst = model.instances.add(instanceTransform);
  
  //inst.color =Cesium.Color.GREEN;
}

viewer.scene.camera.setView({
  destination: new Cesium.Cartesian3(
    950971.9555012125,
    -4592451.1790314745,
    4309468.958291063,
  ),
  orientation: new Cesium.HeadingPitchRoll.fromDegrees(80.61, -7.2, 0.0),
});

function handleSelection(screenPosition) {
  const picked = viewer.scene.pick(screenPosition, 15, 15);
  
  if (!picked) {
    return;
  }
  
  const instance = model.instances.get(picked.instanceId);
  instance.color = instance.color === undefined ? Cesium.Color.RED : undefined;
}

const handler = new Cesium.ScreenSpaceEventHandler(viewer.camera.canvas);
handler.setInputAction((click) => handleSelection(click.position), Cesium.ScreenSpaceEventType.LEFT_CLICK);

[github-actions]

Thank you for the pull request, @rudacs!

✅ We can confirm we have a CLA on file for you.