首页 / Cesium / 使用示例
分割显示的模型
一栋楼,左半蓝右半橙,中间一道切缝来回扫。两次模型加载、两个裁剪平面,就能做出对照效果。
源码与运行效果
这个示例在做什么
同一个模型被切成左右两半:左半染蓝、右半染橙,切缝在模型上来回移动。 做法是加载两份模型,各自挂一个方向相反的裁剪平面,再用不同的颜色混合。
两个平面的 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。