cesium 3dtiles 模型裁切_cesium 3dtiles 裁剪-优快云博客

本文链接：https://blog.youkuaiyun.com/lhjuejiang/article/details/123004912

本文介绍了如何使用Cesium的ClippingPlaneCollection和ClippingPlane进行3D实体和3DTiles的裁切操作。通过示例代码展示了水平和垂直裁切的实现，并详细解释了裁切逻辑，包括地图加载、鼠标事件处理以及3DTiles裁切的具体步骤。此外，还提供了鼠标交互功能，允许用户调整裁切面的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Cesium Sandcastle 官网示例,包括实体、3dtiles等的裁切

熟悉cesium 的api

ClippingPlaneCollection
ClippingPlane
Plane
Cesium3DTileset
CallbackProperty

ClippingPlane 可以控制裁切方向，值不同，裁切方向也不同

水平裁切

垂直裁切

下面是3dtiles裁切的代码逻辑，仅供参考

mapReady(){ // 地图加载完成
  this.initMouseEvt(); // 添加鼠标事件
}

点击裁切按钮执行

tileset = new Cesium.Cesium3DTileset({
     url: config.serverUrl + "/osgbresult/tileset.json",
     skipLevelOfDetail: true,
     preferLeaves: true,
     maximumMemoryUsage: 1024
});
viewer.scene.primitives.add(tileset);

this.loadTileset(tileset)

 loadTileset(tileset) {
       const { viewer, Cesium } = window.$cesiumInstance;
      clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [
          new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0, 0.0, 0.0), 0.0) //裁切方向
        ],
        edgeWidth: 1.0
      });

      
      tileset.clippingPlanes = clippingPlanes

      let _this = this;

     const boundingSphere = tileset.boundingSphere;
          const radius = boundingSphere.radius;

          viewer.zoomTo(
            tileset,
            new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0)
          );

          if (
            !Cesium.Matrix4.equals(
              tileset.root.transform,
              Cesium.Matrix4.IDENTITY
            )
          ) {
            // The clipping plane is initially positioned at the tileset's root transform.
            // Apply an additional matrix to center the clipping plane on the bounding sphere center.
            const transformCenter = Cesium.Matrix4.getTranslation(
              tileset.root.transform,
              new Cesium.Cartesian3()
            );
            const transformCartographic = Cesium.Cartographic.fromCartesian(
              transformCenter
            );
            const boundingSphereCartographic = Cesium.Cartographic.fromCartesian(
              tileset.boundingSphere.center
            );
            const height =
              boundingSphereCartographic.height - transformCartographic.height;
            clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(
              new Cesium.Cartesian3(0.0, 0.0, height)
            );
          }

          for (let i = 0; i < clippingPlanes.length; ++i) {
            const plane = clippingPlanes.get(i);
            const planeEntity = viewer.entities.add({
              position: boundingSphere.center,
              plane: {
                dimensions: new Cesium.Cartesian2(radius * 2.5, radius * 2.5),
                material: Cesium.Color.WHITE.withAlpha(0.1),
                plane: new Cesium.CallbackProperty(
                  _this.createPlaneUpdateFunction(plane),
                  false
                ),
                outline: true,
                outlineColor: Cesium.Color.WHITE
              }
            });

            planeEntities.push(planeEntity);
          }
    },

initMouseEvt() {
      var selectedPlane;
      let _this = this;
      const { viewer, Cesium } = window.$cesiumInstance;
      var ellipsoid = viewer.scene.globe.ellipsoid;
      var scene = viewer.scene
      // 注册鼠标事件
      var downHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击事件
      downHandler.setInputAction(function(movement) {
        const pickedObject = scene.pick(movement.position);
        if (
          Cesium.defined(pickedObject) &&
          Cesium.defined(pickedObject.id) &&
          Cesium.defined(pickedObject.id.plane)
        ) {
          selectedPlane = pickedObject.id.plane;
          selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
          selectedPlane.outlineColor = Cesium.Color.WHITE;
          scene.screenSpaceCameraController.enableInputs = false;
        }
      }, Cesium.ScreenSpaceEventType.LEFT_DOWN);

      // 注册鼠标松开事件
      var upHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击向上事件
      upHandler.setInputAction(function() {
        if (Cesium.defined(selectedPlane)) {
          //如果存在这个对象
          selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.6); // 恢复选中的切面颜色
          selectedPlane.outlineColor = Cesium.Color.blue; //
          selectedPlane = undefined;
        }
        viewer.scene.screenSpaceCameraController.enableInputs = true; // 恢复默认的鼠标一切输入事件
      }, Cesium.ScreenSpaceEventType.LEFT_UP);

      // 注册鼠标移动事件，
      var moveHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas); //鼠标点击移动事件
      moveHandler.setInputAction(function(movement) {
        //通过指定的椭球或者地图对应的坐标系，将鼠标的二维坐标转换为对应椭球体三维坐标
        if (Cesium.defined(selectedPlane)) {
          const deltaY = movement.startPosition.x - movement.endPosition.x;
          targetY += deltaY;
        }
      
      }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    },