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

分割显示的模型

一栋楼,左半蓝右半橙,中间一道切缝来回扫。两次模型加载、两个裁剪平面,就能做出对照效果。

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

这个示例在做什么

同一个模型被切成左右两半:左半染蓝、右半染橙,切缝在模型上来回移动。 做法是加载两份模型,各自挂一个方向相反的裁剪平面,再用不同的颜色混合。

两个平面的 distance 互为相反数,所以切缝始终重合。 ColorBlendMode.MIX 让 model.color 与模型原色按比例混合, colorBlendAmount 决定混合强度。这个思路常用来对比两期数据, 或在一个视口里同时看到「方案」与「现状」。

关键接口

接口作用
ClippingPlane(normal, distance)法向相反的两个平面切出互补的两半
model.color整体调色,配合混合模式做区分
ColorBlendMode.MIX按 colorBlendAmount 混合原色
planes[0].distance运行时改变切缝位置

可以直接改的地方

位置改什么效果
new Cartesian3(-1, 0, 0)改成 (0, -1, 0)改成南北向切分
0.72(混合强度)改成 0.3颜色更淡,接近原色
splitX 上限 12改成 20切缝扫过整个模型
dir * 0.06改速度切缝移动快慢

替代说明:官方示例对同一份 ion 数据做分割显示,一半显示原状、一半显示处理结果。 这里两个模型共用一份 GLB,用互补裁剪平面与颜色混合复现;换成 tileset 时 同样使用 tileset.clippingPlanes。