three.js多个canvas画布的网格应用

主要的知识点有两点：

1、camera.setViewOffset函数

2、context.drawImage 函数

我们先来了解 setViewOffset

官方文档的说明如下：

 

.setViewOffset ( fullWidth : Float, fullHeight : Float, x : Float, y : Float, width : Float, height : Float ) : null
fullWidth — 多视图的全宽设置
fullHeight — 多视图的全高设置
x — 副摄像机的水平偏移
y — 副摄像机的垂直偏移
width — 副摄像机的宽度
height — 副摄像机的高度

在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。

例如，如果你有一个3x2的显示器阵列，每个显示器分辨率都是1920x1080，且这些显示器排列成像这样的网格：
+---+---+---+
| A | B | C |
+---+---+---+
| D | E | F |
+---+---+---+

可以把canvas看成上面的显示器。两行三列按顺序排列。把threejs的渲染内容投射到这个阵列中。那么就需要setViewOffset来设置相机的视角。可以对照下图来理解，绿色部分为：

setViewOffset表示在渲染的时候，我们只显示浅绿色部分。只有这一部分才会被映射到最终的屏幕上（canvas&#