经纬志
首页 / Cesium / 使用示例

多方向裁剪平面

裁剪平面是最常用的剖切手段:三个方向各切一刀,模型内部结构就露出来了,切口描边让剖面更清楚。

CesiumJS 1.121 · 更新 2026-10-28
源码与运行效果
运行效果

这个示例在做什么

模型被三个裁剪平面切开:西面、南面和顶部。切口处会描一圈蓝色边线, 西向平面还在缓慢移动,能看到实体被一点点削掉的过程。

裁剪平面用局部坐标定义:法向决定「切掉哪一侧」,distance 决定平面沿法向偏移多远。 三个平面可以组合出角落剖切,这是审模、看内部结构最常用的手段。 edgeColor 与 edgeWidth 给切口描边,否则剖面只是一片空洞。

关键接口

接口作用
ClippingPlane(normal, distance)单个裁剪平面,法向朝外的一侧被切掉
ClippingPlaneCollection多个平面组合,支持并集与描边
model.clippingPlanes把裁剪集合挂到模型上,实时生效
planes.get(i).distance运行时改变平面偏移,做扫描式剖切

可以直接改的地方

位置改什么效果
new Cartesian3(1, 0, 0)换成 (0, 0, -1)改成从顶部剖切
distance = 0改成 8 或 -8平面整体偏移
edgeWidth: 2改成 0取消切口描边
Math.sin(…) * 12改幅度扫描范围

替代说明:官方示例对 ion 上的 Cesium OSM Buildings 做多个方向的剖切。 这里用代码生成的 GLB 模型承载同一套 ClippingPlaneCollection; 换成 tileset 时接口名一致:tileset.clippingPlanes。