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

双视口对比

对比是审模的常用手段。两个视口、一台相机,剖切前后放在一起看,差异一目了然。

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

这个示例在做什么

两个视口并排,共用同一台相机的姿态。左边是被平面剖开的模型,右边是完整模型, 拖动视角时两边同步移动,方便对照剖面与外观。

关键在相机同步:在左侧 scene.postRender 里读 camera.positionWC 与欧拉角,写进右侧的 camera.setView。 两个 Viewer 各自持有独立的 WebGL 上下文,但共享同一份模型数据, 因为 blob: 地址可以重复使用,不会重复解析。

关键接口

接口作用
new Cesium.Viewer('c2')第二个视口,容器由额外 DOM 提供
camera.positionWC相机世界坐标,用来同步位置
camera.heading / pitch / roll欧拉角,用来同步姿态
scene.postRender在左侧渲染完成后立刻同步,避免抖动

可以直接改的地方

位置改什么效果
右侧 new Viewer('c2') 的 baseLayer改成 true右侧加载默认底图(需要 Token)
左侧 planes再加一个平面左上角做双面剖切
setView 改成 flyTo换成飞行动画两边会错位,不建议
CSS 里的 50%改成 65%左侧视口更宽

替代说明:官方示例把两份 ion 数据集(或同一数据的不同样式)并排对比。 这里两个视口共用同一份代码生成的 GLB,区别只在裁剪平面;相机同步的写法与官方一致。