经纬志
首页 / three.js / 使用示例

多画布同步

两个独立画布并排,共用一份场景与一批建筑。 左侧是自由视角,右侧固定俯视,旋转建筑时两边同步,用来核对布局与朝向。

three.js 0.160.0 · 更新 2026-10-28
源码与运行效果
运行效果

两份上下文,一份数据

两个 WebGLRenderer 各自持有一个 WebGL 上下文, 但可以渲染同一个 Scene。几何体与材质会在两份上下文里各上传一次, 内存占用翻倍,换来的好处是两块画布的设备像素比、尺寸、相机互不干扰。

只有一个渲染循环:由左侧渲染器的 setAnimationLoop 驱动, 在回调里连续调用两次 render。若两边各起一个循环, 会出现一帧快一帧慢的撕裂感。

项左右
相机透视 45°透视 40°,正上方
交互轨道控制固定
场景同一份,同一批网格
循环由左侧渲染器统一驱动

什么时候值得这么做

常见的场景是「主视图 + 鹰眼图」,或者「编辑视图 + 结果预览」。 两块画布可以放在不同容器里,各自响应不同的交互,布局比单画布切视口灵活得多。 代价是显存翻倍,移动端要谨慎。

窗口尺寸变化要两边都改。两个渲染器各有自己的 setSize,漏掉任何一个,那块画面会停留在旧尺寸, 表现为模糊或只画一角。