Cesium专栏-裁剪分析（基于3dtiles模型)

关于裁剪

裁剪在PS下大概都很熟悉，框出一个矩形选择自己想要的部分就是裁剪功能了，那么，在三维里，在Cesium中，可以模拟这种动态裁剪模型效果，查看浏览模型在某一个剖面内部的细节。本文侧重于基于3dtiles模型的裁剪效果。

效果图

还未裁剪

已经裁剪

需要提前预习的接口

• ClippingPlaneCollection
• ClippingPlane
• Plane
• Cesium3DTileset
• CallbackProperty

具体操作

1、初始化地球，并开启深度测试

Cesium.Ion.defaultAccessToken = 'xxxx';
var viewer = new Cesium.Viewer('cesiumContainer', {
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'http://www.google.cn/maps/vt?lyrs=s@716&x={x}&y={y}&z={z}'
    })
});
var scene = viewer.scene;
viewer.scene.globe.depthTestAgainstTerrain = true;

2、创建切面平面对象

// 创建切面平面集合
var clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [
        new Cesium.ClippingPlane(new Cesium.Cartesian3(0, 0, -1), 0) // 平面的方向 以及 平面到原点的距离
    ],
    edgeColor: Cesium.Color.WHITE, // 平面切割时模型的边缘颜色
    edgeWidth: 0 // 平面切割时模型的边缘宽度
});

3、加载3dtiles模型，并指定裁剪平面

// 加载大雁塔模型
var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
    url: "http://localhost:90/dayanta/tileset.json",
    clippingPlanes: clippingPlanes
}));

4、创建切面的可视化对象

tileset.readyPromise.then(function () {
    // 当模型加载完成后，改变高度，3dtile模型一般都会飘在空中
    change(-410);
    var boundingSphere = tileset.boundingSphere; // 模型的包围球范围
    var radius = boundingSphere.radius; // 长度
    viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0));
    // 加载plane可视化切面平面
    for (var i = 0; i < clippingPlanes.length; ++i) {
        var plane = clippingPlanes.get(i);
        viewer.entities.add({
            position: boundingSphere.center,
            plane: {
                dimensions: new Cesium.Cartesian2(radius * 2, radius * 2),
                material: Cesium.Color.RED.withAlpha(0.6),
                plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane), false),
                outline: true,
                outlineColor: Cesium.Color.WHITE
            }
        });
    }
});

5、注册鼠标事件，实现动态裁剪效果

// 注册鼠标按下事件
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
    var 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.BLUE.withAlpha(0.5); // 更改选中的切面颜色
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        scene.screenSpaceCameraController.enableInputs = false; // 取消默认的鼠标一切输入事件
    }
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

// 注册鼠标松开事件
viewer.screenSpaceEventHandler.setInputAction(function () {
    if (Cesium.defined(selectedPlane)) {
        selectedPlane.material = Cesium.Color.RED.withAlpha(0.6); // 恢复选中的切面颜色
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        selectedPlane = undefined;
    }
    scene.screenSpaceCameraController.enableInputs = true; // 恢复默认的鼠标一切输入事件
}, Cesium.ScreenSpaceEventType.LEFT_UP);

// 注册鼠标移动事件
viewer.screenSpaceEventHandler.setInputAction(function (movement) {
    if (Cesium.defined(selectedPlane)) {
        var deltaY = movement.startPosition.y - movement.endPosition.y; // 计算鼠标移动的过程中产生的垂直高度距离
        targetY += deltaY;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

link==>