首页 / three.js / 使用示例
四视图
左上透视、右上俯视、左下正视、右下侧视,四个视口共享同一块画布与同一个场景。 拖动左上角的视图,另外三个正交视图会同步反映同一组建筑的位置。
源码与运行效果
视口与裁剪框要成对设置
setViewport 决定画在哪一块,setScissor 决定能画到哪一块。
两个矩形必须一致,否则一个视口的画面会溢出到相邻区域。
渲染前还要打开 setScissorTest(true),它默认是关闭的。
示例只为透视相机创建了 OrbitControls,正交相机保持固定机位。
如果让四个相机都能拖动,需要四套控制器共享同一批事件,
还要处理指针落在哪个象限,复杂度会明显上升。
| 视口 | 相机 | 用途 |
|---|---|---|
| 左上 | 透视 45° | 整体观感,可自由旋转 |
| 右上 | 正交俯视 | 平面布局、间距是否均匀 |
| 左下 | 正交正视 | 立面高度对比 |
| 右下 | 正交侧视 | 进深与遮挡 |
正交相机的横纵比
OrthographicCamera 的投影矩阵由上下左右四个边界决定,
aspect 属性不参与计算。视口变宽时必须同步放大左右边界,
否则画面会被拉伸。示例在布局函数里按视口宽高比重算左右边界。
四视图会渲染四遍。几何体、材质、光照都要跑四次, 帧率大约降到单视图的四分之一。用它做数据核对很值得, 正式运行时应该只保留一个视口。