Cesium 裁切 单面多面裁切

// 创建地球
var viewer = new Cesium.Viewer('容器id',{
	// 初始配置
	animation:true,
	timeline:false,//Boolean true 时间轴控件
	// 更多 参考 官方api  https://cesiumjs.org/refdoc/  Viewer
})
var tileset;
load3Dtilies();
viewer.flyTo(tileset); //飞行到3dtilies 

//加载3dtiles
function load3Dtilies(){
     clippingPlanes =  loadClip();
     tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
     	type: "3dtiles",
     	name: "建筑",
        url : "http://data.marsgis.cn/3dtiles/bim-youeryuan/tileset.json",
        clippingPlanes : clippingPlanes
     }));

     // 设置3DTile 样式
     // tileset.style = new Cesium.Cesium3DTileStyle({
     //     color:"color('white',0.1)",
     //     show:true
     // });
                    
     // tileset.debugShowBoundingVolume = true; //边框线

     tileset.readyPromise.then(function() {  
          var boundingSphere = tileset.boundingSphere;
          var 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)) {
	          var transformCenter = Cesium.Matrix4.getTranslation(tileset.root.transform, new Cesium.Cartesian3());
              var height = Cesium.Cartesian3.distance(transformCenter, tileset.boundingSphere.center);                  
              clippingPlanes.modelMatrix = Cesium.Matrix4.fromTranslation(new Cesium.Cartesian3(0.0, 0.0,height));//height 1.041250292910165e-9
                    
               // //裁切面位置移动
               var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);//tileset.boundingSphere.center配置文件坐标位置信息
               var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
               var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0); //调整3dtilies 高度
               var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
               tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation); //改变3dtiles高度    
                    
          }
          for (var i = 0; i < clippingPlanes.length; ++i) {
               var plane = clippingPlanes.get(i);
               planeEntity = viewer.entities.add({ //添加平面实体 直观裁切面
                    position :boundingSphere.center,// offset, 根据3dtiles同步调整裁切面高度 
                    plane : {
                         dimensions : new Cesium.Cartesian2(150,150),//(radius * 2.5, radius * 2.5),
                         material : Cesium.Color.WHITE.withAlpha(0.0),
                         plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), true),
                         outline : true,
                         outlineColor : Cesium.Color.WHITE
                    }
              	});
            }
        })
    }
	function createPlaneUpdateFunction(plane) {
        return function () {
        	plane.distance = 10; // targetY  设置裁切面高度
            return plane;
        };
    }
    
    function loadClip(){
    	// switch (type) {
        //     case "top": //切顶部
        //         x = 0.0;
        //         y = 0.0;
        //         z = -1.0;
        //         targetY = 20.0;
        //         break;
        //     case "bottom": //切底部
        //         x = 0.0;
        //         y = 0.0;
        //         z = 1.0;
        //         targetY = 4.0;
        //         break;
        //     case "east": //切东  
        //         x = 1.0;
        //         y = 0.0;
        //         z = 0.0;
        //         targetY = 45.0;
        //         break;
        //     case "west": //切西
        //         x = -1.0;
        //         y = 0.0;
        //         z = 0.0;
        //         targetY = 45.0;
        //         break;
        //     case "south": //切南
        //         x = 0.0;
        //         y = 1.0;
        //         z = 0.0;
        //         targetY = 43.0;
        //         break;
        //     case "north": //切北
        //         x = 0.0;
        //         y = -1.0;
        //         z = 0.0;
        //         targetY = 61.0;
        //         break;
        // }
            
    	// 指定一组剪切平面  ClippingPlaneCollection 
        // 对于单个gltf模型、3D Tileset或全局,剪切平面选择性地禁用在指定的剪切平面对象列表外的区域中的呈现。
        // 对于3D tile,根tile的变换用于定位剪切平面。如果没有定义转换,则使用根tile的Cesium3DTile#boundingSphere。??
		clippingPlanes = new Cesium.ClippingPlaneCollection({
			 planes : [ // 裁切面数组
			 	 // x y z disance  //disance  裁切面高度
			 	 // 0 0 z z=-1 重上往下切割  	//切顶部 z=1 重下往上切割 //切底部
				 // x 0 0 x=-1 //切西部 x=1  //切东部 
				 // 0 y 0 y=-1 //切北 y=1   	//切南 
			 	 // 左右切割
                 // new Cesium.ClippingPlane(new Cesium.Cartesian3(1.0,0.0,0),20), //左 
                 // new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0,0.0,0),8),  //右
				 
				 // 单平面切割
				 new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0,0.0,0),8),  //右
			 ],
			 edgeColor : Cesium.Color.RED,
             edgeWidth : 1.0,
             unionClippingRegions:true, //true 才能多个切割  
		})
		// planes一组剪切平面对象,用于选择性地禁用每个平面外部的呈现。
        // enabled:true,//true 确定剪切平面是否处于活动状态。
        // modelMatrix:Matrix4.IDENTITY, //Matrix4	Matrix4.IDENTITY //4x4转换矩阵,指定相对于剪切平面原始坐标系的附加转换。
        // unionClippingRegions:true,则如果区域位于集合中任何平面的外部,则对该区域进行剪切。否则,一个区域只有在每一个平面的外侧才会被裁剪。
        // edgeColor:Color.WHITE,//用来突出裁剪对象的边缘的颜色。
        // edgeWidth:2.0,//用于裁剪对象的边缘的高亮显示的宽度(以像素为单位)。
		return clippingPlanes
	}

官方平面裁剪案例 https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/?src=3D%20Tiles%20Clipping%20Planes.html

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页