cesium 3dtiles 模型裁切

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); },