Cesium 模型剖切

ッ微凉

已于 2024-08-26 15:15:07 修改

阅读量273

点赞数 2

分类专栏： Cesium 文章标签：前端

于 2024-08-23 17:30:25 首次发布

本文链接：https://blog.csdn.net/weiliangLAN/article/details/141470279

版权

Cesium 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

效果图：

核心代码：

1. 设置模型的 clippingPlanes 属性（用于有选择地禁用渲染模型）

/****************** 加载模型 *********************/
const position = new Cesium.Cartesian3(-2489625.0836225147,-4393941.44443024,3890535.9454173897);

let clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [],
    edgeWidth: 1.0,
});

const addModal = () => {
    modelEntity = viewer.entities.add({
        name: "model",
        position,
        model: {
            uri: '/public/modals/haimianbaobao.glb',
            minimumPixelSize: 500, // 最小的模型像素
            maximumScale: 500, // 最大的模型像素
            runAnimations: false, // 关闭动画
            show: true,
            clippingPlanes
        },
    });
    // 聚焦模型
    viewer.trackedEntity = modelEntity;
}

2. 动态清空、生成切割面

/** 使用的核心方法 **/

 //清空切割面数据
modelEntity.model.clippingPlanes._value.removeAll();

// 添加切割面数据
modelEntity.model.clippingPlanes._value.add( 
    new Cesium.ClippingPlane(new Cesium.Cartesian3(0.0, 1.0, 0.0), 0.0)
);
其中 new Cesium.ClippingPlane(new Cesium.Cartesian3(x, y, z), distance),
切割面位于哪个轴，就把那个轴设为1，其他轴为0；
distance为该切割面距离初始原点的距离


// 添加剖切面
const addSlice = () => {
    for (let i = 0; i < clippingPlanes.length; ++i) {
        // plane 为上面 modelEntity.model.clippingPlanes._value.add 添加的数据
        const plane = clippingPlanes.get(i);
        planeEntity = viewer.entities.add({
            position,
            plane: {
                dimensions: new Cesium.Cartesian2(10, 10),
                material: Cesium.Color.WHITE.withAlpha(0.1),
                plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane),false),
                outline: true,
                outlineColor: Cesium.Color.WHITE,
            },
        });
    }
}

3. 动态控制切割面距离原点的距离

const createPlaneUpdateFunction = (plane) => {
    return function () {
        plane.distance = actionData.distance; // 动态更新距离
        return plane;
    }; 
}

完整代码：

<template>
    <div id="cesiumViewer"></div>
    <div class="action">
        <div>
            <span>轴：</span>
            <div>
                <button 
                    v-for="axis in axisArr" 
                    :key="axis"
                    :class="{active: actionData.axis === axis}"
                    @click="changeAxis(axis)"
                >
                    {{axis}}
                </button>
            </div>
        </div>
        <div>
            <span>方向：</span>
            <div>
                <button 
                    v-for="direction in directionArr" 
                    :key="direction"
                    :class="{active: actionData.direction === direction}"
                    @click="changeDirection(direction)"
                >
                    {{direction}}
                </button>
            </div>
        </div>
        <div>
            <span>离原点距离：</span>
            <div>
                <a-slider v-model:value="actionData.distance" :max="10" :min="-10" :step="0.01" :tooltip-open="true" />
            </div>
        </div>
    </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onBeforeUnmount, onMounted, reactive } from 'vue';
let viewer, modelEntity, planeEntity = null;
onMounted(() => {
    initCesium(); //初始化
    addModal();
})

/****************** 初始化 *********************/
const initCesium = () => {
    Cesium.Ion.defaultAccessToken = 'eyJ...';
    viewer = new Cesium.Viewer('cesiumViewer',{
        infoBox: false, // 禁用沙箱，解决控制台报错
        animation: false, // 是否创建动画小器件，左下角仪表
        baseLayerPicker: false, // 是否显示图层选择器
        fullscreenButton: false, // 是否显示全屏按钮
        geocoder: false, // 是否显示geocoder小器件，右上角查询按钮
        homeButton: false, // 是否显示Home按钮
        infoBox: false, // 是否显示信息框
        sceneModePicker: false, // 是否显示3D/2D选择器
        selectionIndicator: false, // 是否显示选取指示器组件
        timeline: false, // 是否显示时间轴
        navigationHelpButton: false, // 是否显示右上角的帮助按钮
        navigationInstructionsInitiallyVisible: false,  //是否显示帮助信息控件
        showRenderLoopErrors: false, // 是否显示渲染错误
        // 设置背景透明
        orderIndependentTranslucency: false,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             
        shouldAnimate: true, //执行模型动画
        terrainProvider: Cesium.createWorldTerrain(), //地形 
    });

    viewer._cesiumWidget._creditContainer.style.display = 'none' // 隐藏logo
    viewer.scene.globe.enableLighting = true;   //启用使用场景光源照亮地球
    viewer.scene.globe.depthTestAgainstTerrain = true;  //启用深度测试
}

/****************** 控制面板 *********************/
let axisArr = ['x', 'y', 'z'];
let directionArr = [1, -1];

const actionData = reactive({
    axis: '',
    direction: 1,
    distance: 0
})

// 设置剖切面板的轴和方向
const setClippingPlane = () => {
    let axisVal = { x: 0, y: 0, z: 0 };
    if(actionData.axis in axisVal) {
        axisVal[actionData.axis] = actionData.direction;
    }
    return new Cesium.ClippingPlane(new Cesium.Cartesian3(axisVal.x, axisVal.y, axisVal.z), actionData.distance);
}

// 轴改变
const changeAxis = (axis) => {
    clearPlanes();
    if(actionData.axis === axis) {
        actionData.axis = "";
        return;
    }
    actionData.axis = axis;
    let clippingPlane = setClippingPlane();
    modelEntity.model.clippingPlanes._value.add(clippingPlane);
    addSlice();
}

// 方向改变
const changeDirection = (direction) => {
    actionData.direction = direction;
    clearPlanes();
    let clippingPlane = setClippingPlane();
    modelEntity.model.clippingPlanes._value.add(clippingPlane);
    addSlice();
}

//清空
const clearPlanes = () => {
    modelEntity.model.clippingPlanes._value.removeAll();
    planeEntity && viewer.entities.remove(planeEntity);
    planeEntity = null;
}

/****************** 加载模型 *********************/
const position = new Cesium.Cartesian3(-2489625.0836225147,-4393941.44443024,3890535.9454173897);

let clippingPlanes = new Cesium.ClippingPlaneCollection({
    planes: [],
    edgeWidth: 1.0,
});

const addModal = () => {
    modelEntity = viewer.entities.add({
        name: "model",
        position,
        model: {
            uri: '/public/modals/haimianbaobao.glb',
            minimumPixelSize: 500, // 最小的模型像素
            maximumScale: 500, // 最大的模型像素
            runAnimations: false, // 关闭动画
            show: true,
            clippingPlanes
        },
    });
    // 聚焦模型
    viewer.trackedEntity = modelEntity;
}

// 添加剖切面
const addSlice = () => {
    for (let i = 0; i < clippingPlanes.length; ++i) {
        const plane = clippingPlanes.get(i);
        planeEntity = viewer.entities.add({
            position,
            plane: {
                dimensions: new Cesium.Cartesian2(10, 10),
                material: Cesium.Color.WHITE.withAlpha(0.1),
                plane: new Cesium.CallbackProperty(createPlaneUpdateFunction(plane),false),
                outline: true,
                outlineColor: Cesium.Color.WHITE,
            },
        });
    }
}

const createPlaneUpdateFunction = (plane) => {
    return function () {
        plane.distance = actionData.distance;
        return plane;
    }; 
}

onBeforeUnmount(() => {
})
</script>

<style lang="less" scoped>
#cesiumViewer {
    width: 100%;
    height: 100%;
}
.action {
    width: 300px;
    position: absolute;
    right: 10px;
    top: 10px;
    background-color: #fff;
    padding: 20px;
    >div {
        display: flex;
        align-items: center;
        margin-top: 20px;
        &:first-of-type {
            margin-top: 0;
        }
        button {
            cursor: pointer;
        }
        >span {
            flex-shrink: 0;
            width: 100px;
        }
        >div {
            flex: 1;
        }
    }
    .active {
        color: #fff;
        background-color: cadetblue;
    }
}
</style>