【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); 
相关推荐
xhload3d2 天前
热力图可视化为何被广泛应用?| 图扑数字孪生
3d·html5·webgl·数字孪生·可视化·热力图·三维建模·轻量化·电力能源·空间热力图
EQ-雪梨蛋花汤2 天前
【裸眼3D原理浅析】使用AI生成平面裸眼3D图像——“科幻战士破框而出”的裸眼3D图背后的原理与技巧
平面·3d
十年_H2 天前
Cesium 顶点着色器的数据来源
javascript·webgl·cesium
十年_H4 天前
Cesium自定义着色器-片元着色器数据来源
javascript·cesium
十年_H5 天前
Cesium自定义着色器:分量修改与完全赋值
javascript·cesium
十年_H5 天前
Cesium自定义着色器-模式
javascript·cesium
Evand J6 天前
【MATLAB例程】到达角度定位(AOA),平面环境多锚点定位(自适应基站数量),动态轨迹使用EKF滤波优化。附代码下载链接
开发语言·matlab·平面·滤波·aoa·到达角度
夜星辰20236 天前
RK3568 MIPI 摄像头驱动的 V4L2 多平面视频格式解析
平面·摄像头格式·nv12
xhload3d8 天前
WebGL/Canvas 内存泄露分析
低代码·3d·html5·webgl·数字孪生·可视化·软件开发·工业互联网·内存泄漏·轻量化·技术应用·hightopo
爱看书的小沐11 天前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine