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

cesium 3dtiles 模型裁切相关推荐

Cesium 模型裁切（包括单面和多面）
本人使用cesium版本依旧是1.6.1. 现阶段可以实现单面和多面(盒子)裁剪,不多说,直接上代码: 加载模型数据: m_b3dm = viewer.scene.primitives.add(new ...
Cesium：3D-Tiles模型剖面图分析
Cesium:3D-Tiles模型剖面图分析剖面图简介 Cesium代码实现实现效果实现思路分析问题1:如何绘制3D线? 问题2:如何获取剖面的起伏变化? 问题3:如何绘制剖面图? 示例代码 ...
Cesium加载3Dtiles模型-大疆智图
Cesium加载3Dtiles模型 Cesium加载3Dtiles模型步骤: (一)如果您使用的是大疆智图,则该软件可以直接输出3Dtiles格式(B3DM切片)的数据,如图所示: var viewe ...
GIS数据处理-cesium中模型位置设置
GIS数据处理-cesium中模型位置设置介绍最近我收到不少人私信询问我,在cesium中加载3dtiles模型后如何调整模型位置,这里我就统一的介绍一下,我是怎么处理的以供大家参考. 常见模型分 ...
Cesium进入模型内部
Cesium加载的3DTiles模型,包含大楼等室内空间,根据Cesium默认的鼠标滚轮等操作是没有办法进入建筑物内部的,除非通过一些技巧,比如视图移动到旁边再平移进去.对于普通用户来说非常不好操作. ...
Cesium bim模型加载并与模型树关联（分层加载）
很久都没写文章了,最近实在是太忙了,向各位关注我的小伙伴致个歉! 最近没事儿写了个模型树和模型关联的功能,处理工具是用的cesiumlab. 说明一下为什么要用cesiumlab: 网上现在有很多的模 ...
Cesium 3dtiles 渐变特效 vite-plugin-cesium版
Cesium 3dtiles 渐变特效 vite-plugin-cesium版源码结语源码 // An highlighted block import * as Cesium from &qu ...
Cesium|xt3d模型展开动画
Cesium|xt3d模型展开动画效果代码预览地址效果代码 <!DOCTYPE html> <html lang="zh-CN"><head ...
对比分析OSG与Cesium中模型LOD的异同
1. LOD 熟悉渲染的读者可能经常听到LOD(Level Of Detail),也就是用不同的细节层次来表达同一个对象.比如下图中的雕像,从左到右精细度越来越低,最后甚至仅剩一个轮廓,已经看不出人形 ...

cesium 3dtiles 模型裁切

cesium 3dtiles 模型裁切相关推荐

最新文章

热门文章