cesium剖切/挖洞

最新推荐文章于 2024-09-09 08:53:09 发布

理工GISer

最新推荐文章于 2024-09-09 08:53:09 发布

阅读量822

点赞数 23

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/honor2/article/details/141942296

版权

1.cesium实现剖切

剖切主要使用ClippingPlane
- 第一个参数接收cartesian3，表示该平面的法线方向，具体基于什么坐标系还没搞清楚，大致是基于世界坐标系的
- 第二个参数接收number，表示该平面距离初始位置的距离，注意该距离是沿法线相反方向的
裁剪：法线所指方向为平面的正面（若法线方向为[0,0,1]则平面的上面为正面，平面下方的内容会被裁掉），平面背面的内容会被裁掉
关闭深度检测：剖切不能有深度测试，有深度测试会被遮盖（viewer.scene.globe.depthTestAgainstTerrain = false）
使用Cesium自带地形

3dTiles剖切实现思路

1.创建ClippingPlaneCollection，为ClippingPlaneCollection配置ClippingPlane，指定ClippingPlane的法线与距离

2.加载3dtiles并配置ClippingPlaneCollection。如果3dtiles有变换，那就需要计算模型平移之后模型中心点的位置的偏移量，使我们的剖切平面保持在我们要剖切模型的物体上。

3.可视化plane，遍历ClippingPlaneCollection的planes，作为实体添加。注意实体的position应该位于3dtiles的中心（tileset.boundingSphere.center），实体的plane中的plane配置项应该为CallbackProperty，回调中返回一个根据鼠标移动计算过distance的plane。

4.注册LEFT_DOWN事件：使用scene.pick(movement.position)判断是否选中上一步中添加plane实体，如果选中，存储为selectedPlane，并设置该实体的选中样式，设置禁止鼠标输入（scene.screenSpaceCameraController.enableInputs = false），从而防止单机拖动操作会触发视图移动。

5.注册MOUSE_MOVE事件：判断selectedPlane是否有值，若有，计算鼠标移动值，用于3中CallbackProperty实时计算distance

6.注册LEFT_UP事件：开启鼠标输入（scene.screenSpaceCameraController.enableInputs = true）。判断selectedPlane是否有值，若有，将plane实体样式还原，未选中样式，并设置selectedPlane为空

地形剖切

注册左击事件：采集坐标，存储到positions

注册右击事件：

根据positions两两点计算裁剪面的法线，根据法线创建裁剪面，将裁剪面添加至裁剪面集合，并设置unionClippingRegions: false，将该集合赋值给globe.clippingPlanes。

//参考：
//https://blog.csdn.net/renkangever/article/details/109739366
//https://www.cnblogs.com/wanghui2011/articles/12924464.html
var pointsLength = points.length
        for (var i = 0; i < pointsLength; i++) {
          var nextIndex = (i + 1) % pointsLength
          console.log(nextIndex)

          // 计算相邻两个点之间的中点 (points[i]+points[nextIndex])/2
          var midpoint = Cesium.Cartesian3.add(
            points[i],
            points[nextIndex],
            new Cesium.Cartesian3()
          )
          midpoint = Cesium.Cartesian3.multiplyByScalar(midpoint, 0.5, midpoint)

          // 将中点归一化
          var up = Cesium.Cartesian3.normalize(
            midpoint,
            new Cesium.Cartesian3()
          )
          // 计算出右侧下一点的方向
          var right = Cesium.Cartesian3.subtract(
            points[nextIndex],
            midpoint,
            new Cesium.Cartesian3()
          )
          // 将右侧点归一化
          right = Cesium.Cartesian3.normalize(right, right)
          //利用外积计算两个向量的法向量，并将法向量归一化，也就是计算出来剖切面的朝向
          var normal = Cesium.Cartesian3.cross(
            right,
            up,
            new Cesium.Cartesian3()
          )
          //normal归一化
          normal = Cesium.Cartesian3.normalize(normal, normal)
          console.log("normal",normal);
          
          // 根据法向量创建剖切面
          var originCenteredPlane = new Cesium.Plane(normal, 0.0)
          // 计算平面到中点之间的距离
          var distance = Cesium.Plane.getPointDistance(
            originCenteredPlane,
            midpoint
          )
          // 确定剖切面法向量与距离
          let plane = new Cesium.ClippingPlane(normal, distance)
          clippingPlanes.push(plane)

创建根据positions创建polygon进行以下配置

material: new Cesium.ImageMaterialProperty({
image: YanShi,//设置贴图
// repeat: new Cesium.Cartesian2(3.0, 3.0),
}),
closeTop: false, // 顶部不关闭
extrudedHeight: 0,//控制挖的深度
perPositionHeight: true, // 使用每个位置的高度