iModel Mesh Export Service【译】

原文链接及内容

原文链接：https://sandcastle.cesium.com/?src=iModel%20Mesh%20Export%20Service.html&label=All

示例介绍：结合 Bentley iTwin Platform 的数据，展示建筑模型和现实网格（Reality Mesh），并提供交互功能，如要素选择、视角切换和全景模式（Photosphere Mode）。

效果如下图所示：

示例代码如下：

const viewer = new Cesium.Viewer("cesiumContainer", {
  geocoder: false,
  homeButton: false,
  sceneModePicker: false,
  navigationHelpButton: false,
  navigationInstructionsInitiallyVisible: false,
  animation: false,
  timeline: false,
  fullscreenButton: false,
  skyBox: false,
  shouldAnimate: true,
  baseLayerPicker: false,
  terrain: Cesium.Terrain.fromWorldTerrain(),
});

/**
 * 对于其他形式的认证，您可以访问 https://developer.bentley.com/apis/overview/authorization/。
 * 然后设置访问令牌，如下所示：Cesium.ITwinPlatform.defaultAccessToken = 'your token'
 */
Cesium.ITwinPlatform.defaultShareKey =
  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpVHdpbklkIjoiNTM1YTI0YTMtOWIyOS00ZTIzLWJiNWQtOWNlZGI1MjRjNzQzIiwiaWQiOiI2NTEwMzUzMi02MmU3LTRmZGQtOWNlNy1iODIxYmEyMmI5NjMiLCJleHAiOjE3NzcwNTU4MTh9.Q9MgsWWkc6bb1zHUJ7ahZjxPtaTWEjpNvRln7NS3faM";

const scene = viewer.scene;
scene.globe.show = true; //显示地球表面

let selectedFeature;
let picking = false;

Sandcastle.addToggleButton(
  "启用鼠标悬停选择要素",
  false,
  function (checked) {
    picking = checked;
    if (!picking) {
      unselectFeature(selectedFeature);
    }
  },
  "checkbox"
);

/**
 * 创建一个 <div> 元素（nameOverlay）作为覆盖层，用于显示鼠标悬停时要素的信息。
 */
const nameOverlay = document.createElement("div");
viewer.container.appendChild(nameOverlay);
nameOverlay.className = "backdrop";
nameOverlay.style.display = "none";
nameOverlay.style.position = "absolute";
nameOverlay.style.bottom = "0";
nameOverlay.style.left = "0";
nameOverlay.style["pointer-events"] = "none"; //防止覆盖层干扰鼠标事件
nameOverlay.style.padding = "4px";
nameOverlay.style.backgroundColor = "black";
nameOverlay.style.whiteSpace = "pre-line";
nameOverlay.style.fontSize = "12px";

// 要素选择
function selectFeature(feature, movement) {
  feature.color = Cesium.Color.clone(
    // 将选中特征的颜色设置为黄色（#eeff41）
    Cesium.Color.fromCssColorString("#eeff41"),
    feature.color
  );
  selectedFeature = feature;

  nameOverlay.style.display = "block";
  nameOverlay.style.bottom = `${
    viewer.canvas.clientHeight - movement.endPosition.y
  }px`;
  nameOverlay.style.left = `${movement.endPosition.x}px`;
  const element = feature.getProperty("element");
  const subcategory = feature.getProperty("subcategory");
  const message = `元素ID: ${element}
      子类别: ${subcategory}
      要素ID: ${feature.featureId}`;
  nameOverlay.textContent = message;
}

// 取消要素选择
function unselectFeature(feature) {
  if (!Cesium.defined(feature)) {
    return;
  }

  // 将要素颜色设置为白色
  feature.color = Cesium.Color.clone(Cesium.Color.WHITE, feature.color);
  selectedFeature = undefined;
  nameOverlay.style.display = "none";
}

// 加载周围区域模型
const surroundingArea = await Cesium.ITwinData.createTilesetFromIModelId(
  "f856f57d-3d28-4265-9c4f-5e60c0662c15"
);
// 加载车站模型
const station = await Cesium.ITwinData.createTilesetFromIModelId(
  "669dde67-eb69-4e0b-bcf2-f722eee94746"
);
// 设置 colorBlendMode 为 REPLACE，确保高亮颜色完全替换原始颜色
surroundingArea.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;
station.colorBlendMode = Cesium.Cesium3DTileColorBlendMode.REPLACE;

scene.primitives.add(surroundingArea);
scene.primitives.add(station);

const iTwinId = "535a24a3-9b29-4e23-bb5d-9cedb524c743";
const realityMeshId = "85897090-3bcc-470b-bec7-20bb639cc1b9";
// 使用 Cesium.ITwinData.createTilesetForRealityDataId 加载现实网格（Reality Mesh
const realityMesh = await Cesium.ITwinData.createTilesetForRealityDataId(
  iTwinId,
  realityMeshId
);
scene.primitives.add(realityMesh);

Sandcastle.addToolbarButton(
  "切换“周围区域”模型可见性",
  () => (surroundingArea.show = !surroundingArea.show),
  "layers"
);
Sandcastle.addToolbarButton(
  "切换“车站”模型可见性",
  () => (station.show = !station.show),
  "layers"
);
Sandcastle.addToolbarButton(
  "切换“现实网格”模型可见性",
  () => (realityMesh.show = !realityMesh.show),
  "layers"
);

// 鼠标悬停交互
const handler = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handler.setInputAction(function (movement) {
  if (!picking) {
    return;
  }
  unselectFeature(selectedFeature);

  const feature = scene.pick(movement.endPosition);

  if (feature instanceof Cesium.Cesium3DTileFeature) {
    selectFeature(feature, movement);
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

const birdsEyeView = {
  destination: new Cesium.Cartesian3(
    1255923.367096007,
    -4734564.543879414,
    4072623.4624344883
  ),
  orientation: new Cesium.HeadingPitchRoll(
    6.283185307179586,
    -0.5002442676148875,
    6.283185307179586
  ),
  duration: 0,
  easingFunction: Cesium.EasingFunction.LINEAR_NONE,
};
Sandcastle.addToolbarButton(
  "切换至鸟瞰视角",
  function () {
    surroundingArea.show = true;
    viewer.scene.camera.flyTo(birdsEyeView);
    togglePhotosphere(false);
  },
  "camera-shortcuts"
);

const stationView = {
  destination: new Cesium.Cartesian3(
    1255783.605894154,
    -4732864.394472763,
    4073433.975291202
  ),
  orientation: new Cesium.HeadingPitchRoll(
    5.646321670432638,
    -0.4736439399770642,
    0.00001691713303575426
  ),
  duration: 0,
  easingFunction: Cesium.EasingFunction.LINEAR_NONE,
};
viewer.scene.camera.flyTo(stationView);
Sandcastle.addToolbarButton(
  "聚焦车站",
  function () {
    viewer.scene.camera.flyTo(stationView);
    togglePhotosphere(false);
  },
  "camera-shortcuts"
);

let photoSphereModeEnabled = false;
function togglePhotosphere(forceMode) {
  const shouldBeEnabled = forceMode ?? !photoSphereModeEnabled;
  if (shouldBeEnabled) {
    // 启用全景模式
    scene.screenSpaceCameraController.enableRotate = false;
    scene.screenSpaceCameraController.enableZoom = false;
    scene.screenSpaceCameraController.enableTranslate = false;
    scene.screenSpaceCameraController.enableTilt = false;
    scene.screenSpaceCameraController.lookEventTypes = {
      eventType: Cesium.CameraEventType.LEFT_DRAG,
    };
    photoSphereModeEnabled = true;
  } else {
    // 禁用全景模式
    scene.screenSpaceCameraController.enableRotate = true;
    scene.screenSpaceCameraController.enableZoom = true;
    scene.screenSpaceCameraController.enableTranslate = true;
    scene.screenSpaceCameraController.enableTilt = true;
    scene.screenSpaceCameraController.lookEventTypes = {
      eventType: Cesium.CameraEventType.LEFT_DRAG,
      modifier: Cesium.KeyboardEventModifier.SHIFT,
    };
    photoSphereModeEnabled = false;
  }
}
document
  .querySelector("#camera-shortcuts")
  .appendChild(document.createElement("br"));
const stationPlatform = {
  destination: new Cesium.Cartesian3(
    1255658.5108288145,
    -4732744.54716761,
    4073467.5995740294
  ),
  orientation: new Cesium.HeadingPitchRoll(
    0.08605615778136055,
    -0.08195800893456417,
    3.644617292408725e-7
  ),
  duration: 0,
  easingFunction: Cesium.EasingFunction.LINEAR_NONE,
};
Sandcastle.addToolbarButton(
  "聚焦车站平台",
  function () {
    surroundingArea.show = false;
    viewer.scene.camera.flyTo(stationPlatform);
    togglePhotosphere(true);
  },
  "camera-shortcuts"
);

const stationAtrium = {
  destination: new Cesium.Cartesian3(
    1255653.7753397836,
    -4732735.669421007,
    4073492.4182837387
  ),
  orientation: new Cesium.HeadingPitchRoll(
    0.27348916684631064,
    -0.1626949521764165,
    6.2831852466344875
  ),
  duration: 0,
  easingFunction: Cesium.EasingFunction.LINEAR_NONE,
};
Sandcastle.addToolbarButton(
  "聚焦车站大厅",
  function () {
    surroundingArea.show = false;
    viewer.scene.camera.flyTo(stationAtrium);
    togglePhotosphere(true);
  },
  "camera-shortcuts"
);

const stationRoof = {
  destination: new Cesium.Cartesian3(
    1255656.4324382306,
    -4732754.952130925,
    4073483.76683067
  ),
  orientation: new Cesium.HeadingPitchRoll(
    0.16147447018420547,
    -0.015285346878300077,
    6.28297051403236
  ),
  duration: 0,
  easingFunction: Cesium.EasingFunction.LINEAR_NONE,
};
Sandcastle.addToolbarButton(
  "聚焦车站屋顶",
  function () {
    surroundingArea.show = false;
    viewer.scene.camera.flyTo(stationRoof);
    togglePhotosphere(true);
  },
  "camera-shortcuts"
);