【Cesium】模型平面裁切

javascript 复制代码
const scene = viewer.scene;

let tileset;
let targetY = 400.0;
let planeEntities = [];
let selectedPlane;  // 选择的切面
let clippingPlanes;  // 切面属性

// 当鼠标点击切面时，修改相关属性
const 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.2); // 切面颜色
        selectedPlane.outlineColor = Cesium.Color.BLUE;  // 切面轮廓线颜色
        scene.screenSpaceCameraController.enableInputs = false;
    }
}, Cesium.ScreenSpaceEventType.LEFT_DOWN);

// 鼠标弹出时回复 切面样式
const upHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
upHandler.setInputAction(function () {
    if (Cesium.defined(selectedPlane)) {
        selectedPlane.material = Cesium.Color.WHITE.withAlpha(0.1);
        selectedPlane.outlineColor = Cesium.Color.WHITE;
        selectedPlane = undefined;
    }

    scene.screenSpaceCameraController.enableInputs = true;
}, Cesium.ScreenSpaceEventType.LEFT_UP);

// 移动鼠标更新切面位置
const moveHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
moveHandler.setInputAction(function (movement) {
    if (Cesium.defined(selectedPlane)) {
        const deltaY = movement.startPosition.y - movement.endPosition.y;
        targetY += deltaY;
    }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

function createPlaneUpdateFunction(plane) {
    return function () {
        plane.distance = targetY;
        return plane;
    };
}

// 加载3d tiles
function loadTileset(url) {
    // 指定一组修剪平面。剪裁平面有选择地禁用单个 gltf 模型、3D 图块集或地球的指定 ClippingPlane 对象列表外部区域中的渲染。
    clippingPlanes = new Cesium.ClippingPlaneCollection({
        planes: [  // ClippingPlane 对象的数组，用于有选择地禁用每个平面外部的呈现。
            new Cesium.ClippingPlane(
                new Cesium.Cartesian3(0.0, 0.0, -1.0),
                10.0
            ),
        ],
        edgeWidth: 2.0, // 设置高亮显示对象被剪裁边缘的宽度
    });

    tileset = viewer.scene.primitives.add(
        new Cesium.Cesium3DTileset({
            url: url,
            clippingPlanes: clippingPlanes,
        })
    );

    return tileset.readyPromise 
        .then(function () {
            const boundingSphere = tileset.boundingSphere;
            const radius = boundingSphere.radius;  // 3d tiles包围球体的半径
            viewer.zoomTo(tileset,new Cesium.HeadingPitchRange(0.5, -0.2, radius * 4.0));

            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 * 1.5,radius * 1.8), // 切面的范围
                        material: Cesium.Color.WHITE.withAlpha(0.1),
                        plane: new Cesium.CallbackProperty(  // plane回调，位置
                            createPlaneUpdateFunction(plane),
                            false
                        ),
                        outline: true,
                        outlineColor: Cesium.Color.WHITE,
                    },
                });
                planeEntities.push(planeEntity);
            }
            return tileset;
        })
        .catch(function (error) {
            console.log(error);
        });
}

// 加载3d tiles，创建自己的3d tiles，并上传到cesium ion,也可本地加载3d tiles
const bimUrl = Cesium.IonResource.fromAssetId(2367681); 
loadTileset(bimUrl);