cube map叫作纹理盒

我们之前已经学习过二维纹理 gl.TEXTURE_2D，而且还使用它实现了各种效果。但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP，它包含了6个纹理代表立方体的6个面。不像常规的纹理坐标有2个纬度，立方体纹理使用法向量，换句话说三维方向。本节实现的demo请看 

根据法向量的朝向选取立方体6个面中的一个，这个面的像素用来采样生成颜色。这六个面通过他们相对于立方体中心的方向被引用。它们是分别是

gl.TEXTURE_CUBE_MAP_POSITIVE_X//右
gl.TEXTURE_CUBE_MAP_NEGATIVE_X//左
gl.TEXTURE_CUBE_MAP_POSITIVE_Y//上
gl.TEXTURE_CUBE_MAP_NEGATIVE_Y//下
gl.TEXTURE_CUBE_MAP_POSITIVE_Z//后
gl.TEXTURE_CUBE_MAP_NEGATIVE_Z//前

环境贴图
其实我们更应该把cube map叫作纹理盒，通常纹理盒不是给立方体设置纹理用的，设置立方体纹理的标准用法其实是使用二维贴图，那么纹理盒用来做什么的呢？纹理盒最常见的用法是用来做环境贴图。在百度和google地图中的3D街景就是环境贴图应用的一个例子。

纹理
下面是6张红色峡谷图片

将以上尺寸为512x512的图片填充到立方体的每个面，以下就是纹理的创建加载过程

// 创建纹理。
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_CUBE_MAP, texture);
 
const faceInfos = [
  {
    target: gl.TEXTURE_CUBE_MAP_POSITIVE_X, 
    url: '/img/sorbin_rt.jpg',
  },
  {
    target: gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 
    url: '/img/sorbin_lf.jpg',
  },
  {
    target: gl.TEXTURE_CUBE_MAP_POSITIVE_Y, 
    url: '/img/sorbin_up.jpg',
  },
  {
    target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Y, 
    url: '/img/sorbin_dn.jpg',
  },
  {
    target: gl.TEXTURE_CUBE_MAP_POSITIVE_Z, 
    url: '/img/sorbin_bk.jpg',
  },
  {
    target: gl.TEXTURE_CUBE_MAP_NEGATIVE_Z, 
    url: '/img/sorbin_ft.jpg',
  },
];
faceInfos.forEach((faceInfo) => {
  const {target, url} = faceInfo;
  // 上传画布到立方体贴图的每个面
  const level = 0;
  const format = gl.RGBA;
  const width = 512;
  const heigh