首页 / three.js / 使用示例
多画布同步
两个独立画布并排,共用一份场景与一批建筑。 左侧是自由视角,右侧固定俯视,旋转建筑时两边同步,用来核对布局与朝向。
源码与运行效果
两份上下文,一份数据
两个 WebGLRenderer 各自持有一个 WebGL 上下文,
但可以渲染同一个 Scene。几何体与材质会在两份上下文里各上传一次,
内存占用翻倍,换来的好处是两块画布的设备像素比、尺寸、相机互不干扰。
只有一个渲染循环:由左侧渲染器的 setAnimationLoop 驱动,
在回调里连续调用两次 render。若两边各起一个循环,
会出现一帧快一帧慢的撕裂感。
| 项 | 左 | 右 |
|---|---|---|
| 相机 | 透视 45° | 透视 40°,正上方 |
| 交互 | 轨道控制 | 固定 |
| 场景 | 同一份,同一批网格 | |
| 循环 | 由左侧渲染器统一驱动 | |
什么时候值得这么做
常见的场景是「主视图 + 鹰眼图」,或者「编辑视图 + 结果预览」。 两块画布可以放在不同容器里,各自响应不同的交互,布局比单画布切视口灵活得多。 代价是显存翻倍,移动端要谨慎。
窗口尺寸变化要两边都改。两个渲染器各有自己的
setSize,漏掉任何一个,那块画面会停留在旧尺寸,
表现为模糊或只画一角。