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

四视图

左上透视、右上俯视、左下正视、右下侧视,四个视口共享同一块画布与同一个场景。 拖动左上角的视图,另外三个正交视图会同步反映同一组建筑的位置。

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

视口与裁剪框要成对设置

setViewport 决定画在哪一块,setScissor 决定能画到哪一块。 两个矩形必须一致,否则一个视口的画面会溢出到相邻区域。 渲染前还要打开 setScissorTest(true),它默认是关闭的。

示例只为透视相机创建了 OrbitControls,正交相机保持固定机位。 如果让四个相机都能拖动,需要四套控制器共享同一批事件, 还要处理指针落在哪个象限,复杂度会明显上升。

视口相机用途
左上透视 45°整体观感,可自由旋转
右上正交俯视平面布局、间距是否均匀
左下正交正视立面高度对比
右下正交侧视进深与遮挡

正交相机的横纵比

OrthographicCamera 的投影矩阵由上下左右四个边界决定, aspect 属性不参与计算。视口变宽时必须同步放大左右边界, 否则画面会被拉伸。示例在布局函数里按视口宽高比重算左右边界。

四视图会渲染四遍。几何体、材质、光照都要跑四次, 帧率大约降到单视图的四分之一。用它做数据核对很值得, 正式运行时应该只保留一个视口。