Cesium 模型裁剪

var clippingPlanes;
var planesDistance = [];
function modelClip(){
    clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes : [
            new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0,0.0,-0.5), 0.0)
        ],
        unionClippingRegions: true,
        edgeColor : Cesium.Color.RED,
        edgeWidth : 1
    });
    // 设置模型的裁切平面clippingPlanes

    tileset.readyPromise.then(function() {
        var boundingSphere = tileset.boundingSphere;
        var radius = boundingSphere.radius;
        tileset.clippingPlanes = clippingPlanes;
        //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同步调整裁切面高度
                name:'clip',
                plane : {
                    dimensions : new Cesium.Cartesian2(radius * 2.5, radius * 2.5),//(radius * 2.5, radius * 2.5),
                    material : Cesium.Color.WHITE.withAlpha(0.5),
                    plane : new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), true),
                    outline : true,
                    fill:true,
                    outlineColor : Cesium.Color.WHITE
                }
            });
        }
    });

    var selectedPlane;
    var ellipsoid = viewer.scene.globe.ellipsoid;
    // 注册鼠标事件
    var downHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);//鼠标点击事件
    downHandler.setInputAction(function (movement) {
        var position = viewer.scene.camera.pickEllipsoid(movement.position, viewer.scene.globe.ellipsoid);
        //console.log(position);
        var pickObject = viewer.scene.pick(movement.position);
        //debugger;
        if (Cesium.defined(pickObject) && Cesium.defined(pickObject.id) && Cesium.defined(pickObject.id.plane)) {
            selectedPlane = pickObject.id.plane;//将entities
            selectedPlane.name = pickObject.id.name//将name赋予selectedPlane
            selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.05);
            selectedPlane.outlineColor = Cesium.Color.WHITE;//更换切面的颜色
            selectedPlane.startPosition = movement.position;//
            selectedPlane.startPosition1 = Cesium.Math.toDegrees((ellipsoid.cartesianToCartographic(position).longitude));//初始位置维度
            viewer.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) {
        //通过指定的椭球或者地图对应的坐标系,将鼠标的二维坐标转换为对应椭球体三维坐标
        var cartesianEnd = viewer.camera.pickEllipsoid(movement.endPosition, ellipsoid);//笛卡尔积,获取鼠标移动结束世界坐标
        var cartesianStart = viewer.camera.pickEllipsoid(movement.startPosition, ellipsoid);//笛卡尔积,获取鼠标开始移动时世界坐标
        if (Cesium.defined(selectedPlane)) {

            //  console.log(selectedPlane.name);//做判断哪个面
            if (selectedPlane.name == "clip") {//往下
                var deltaSize = movement.startPosition.y - movement.endPosition.y; // 计算鼠标移动的过程中产生的垂直高度距离
                var beforSize = planesDistance[selectedPlane.name]?planesDistance[selectedPlane.name]:0;
                var absDelta = Math.abs(deltaSize);
                for(var x=0;x<absDelta;x++){
                    if(deltaSize>0){
                        clippingPlanes.get(0).distance =   beforSize + 1;
                        planesDistance[selectedPlane.name] = beforSize + 1 ;//更改鼠标移动的幅度//从初始位置开始算
                    }else{
                        clippingPlanes.get(0).distance =   beforSize - 1;
                        planesDistance[selectedPlane.name] = beforSize - 1 ;//更改鼠标移动的幅度//从初始位置开始算
                    }
                    //createPlaneUpdateFunction(clippingPlanes.get(0),0);
                }
            }
        }
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}
function createPlaneUpdateFunction(plane) {
    return function () {
        //plane.distance = 10; // targetY  设置裁切面高度
        var moves = planesDistance['clip'];
        moves = moves?moves:0;
        plane.distance =   moves;//切面距离原点的距离就等于移动的距离+模型的半径的一半
        return plane;
    };
}
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Cesium中进行模型裁剪可以通过使用ClippingPlaneCollection和ClippingPlane来实现。首先,你需要创建一个ClippingPlaneCollection对象,其中包含一个或多个ClippingPlane对象。每个ClippingPlane对象定义了一个平面的方向和平面到原点的距离。然后,你可以将这个ClippingPlaneCollection对象应用于你想要进行裁剪模型上。 以下是在Cesium中进行模型裁剪的步骤: 1. 初始化地球并开启深度测试,这可以通过设置Cesium.Viewer对象的相关属性来实现。例如,可以设置`viewer.scene.globe.depthTestAgainstTerrain = true;`来开启深度测试。 2. 创建一个ClippingPlaneCollection对象,并定义一个或多个ClippingPlane对象。每个ClippingPlane对象需要指定平面的方向和平面到原点的距离。例如,可以使用以下代码创建一个包含一个平面的ClippingPlaneCollection对象: ```javascript var clippingPlanes = new Cesium.ClippingPlaneCollection({ planes: [ new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1), 0) ], edgeColor: Cesium.Color.WHITE, edgeWidth: 0 }); ``` 这里的平面方向为`(0, 0, -1)`,即垂直于地球表面向下的方向,平面到原点的距离为0。 3. 将ClippingPlaneCollection对象应用于你想要进行裁剪模型上。具体的操作取决于你使用的模型类型。例如,如果你使用3D Tiles模型,可以使用`cesium3DTileset.clippingPlanes`属性将ClippingPlaneCollection对象赋值给cesium3DTileset对象进行裁剪。 综上所述,使用ClippingPlaneCollection和ClippingPlane对象可以在Cesium中实现模型裁剪。通过定义平面的方向和距离,并将ClippingPlaneCollection对象应用于模型上,你可以实现动态裁剪模型的效果。 请注意,以上提供的代码片段仅供参考,具体的实现方式可能因你的项目需求而有所不同。你可以参考Cesium的文档和示例来获取更详细的信息和代码示例。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Cesium专栏-裁剪效果(基于3dtiles模型,附源码下载)](https://blog.csdn.net/liguoweioo/article/details/120376678)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值