和前面立方体有点不同的是，球体有自己的模型矩阵，这也是一般正常的用法，然后传递眼睛对应球体顶点矢量与法线传递在片断着色器中，在片断着色器中，就有用到前面所生成的立方体纹理，我们根据眼睛经过顶点通过对应法向量反射到立体体纹理上的点来获取当前球体所对应的环境颜色，在这里，我们可以直接调用textureCube来完成上面所说的过程，不需要我们手动来计算。
其中GetShader函数的使用，参照了(v=vs.85) 这里的讲解。
可以说，上面主要的绘制函数已经完成，但是我们这个是能动的，所以需要模拟如客户端环境每隔多久绘制一次，主要代码如下：
动画：
function tick() { Update(); OnDraw(); setTimeout(function () { tick() }, 15); } function OnDraw() { //fbo rander CUBE_MAP RenderFBO(); //element rander gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight); gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); mat4.perspective(pMatrix, 45, gl.viewportWidth / gl.viewportHeight, 0.1, 200.0); mat4.lookAt(vMatrix, eyePos, eyeLookat, vec3.fromValues(0.0, 1.0, 0.0)); RenderCube(); RenderSphere(); } var lastTime = new Date().getTime(); function Update() { var timeNow = new Date().getTime(); if (lastTime != 0) { var elapsed = timeNow - lastTime; //3000控制人眼的旋转速度。8控制人眼的远近 eyePos[0] = Math.cos(elapsed / 3000) * 8; eyePos[2] = Math.sin(elapsed / 2000) * 8; spherePos[0] = Math.cos(elapsed / 4000) * 3; spherePos[2] = Math.cos(elapsed / 4000) * 3; } }
在上面，每隔15毫秒调用一次Update与Draw函数，其中Update用于更新眼睛与球体位置，Draw绘画。
完整实例代码点击此处本站下载。