3D机房前端学习笔记

本文源代码地址：http://download.csdn.net/detail/jamesplur/9797919

实现任务：能够在前端网页中嵌入3D机房模型并实现基本的交互

---

3D基本原理

为了实现3D图像的动态展示有三个要点：

1. 建立三维场景

   三维场景包括三维模型、光源、相机三个部分构成。

   从最简单的情形来说，三维模型由网格（mesh）和材质（material）组成。网格则一般由若干个图元（一般是空间中的三角形）拼接而成。网格表面还要考虑本身的纹理和对光源的反射情况。所以3D模型的数据主要是顶点信息和网格表面材质信息。

   光源就是在空间中人为添加光照信息，例如方向，强度，光色等。没有光源，渲染出来的3D场景将一片漆黑。

   相机相当于场景的一个观察点。相机在建立时就要确定，视角，远平面，近平面，纵横比四个参数。根据这些参数可以确定一个可视区域。3D模型必须在可视区域（view frustum）内。否则将不会被屏幕捕捉。

1. 将场景以2D的形式显示

   要想将场景以2D的形式显示出来，实际就是将空间中的点映射为平面的像素值。这个过程需要考虑两个关系：

   模型和相机之间的关系：这个变换关系由两个矩阵控制，其中一个矩阵表示了相机所在位置和方向，另一个矩阵控制了从3D到2D的投影参数。模型和相机的关系决定空间中的某一点是否会被渲染。

   光源和材质的关系： 光源和材质的关系决定这一点的像素值会是多少。着色器将会结合该点的材质（包括对光的反射率）和光照强度，判断该点的颜色。

2. 当3D数据发生改变时，可以近乎无延迟的对2D图像更新渲染

   上述复杂的映射过程，实际是交给着色器来完成的，着色器往往是一种基于gpu的程序（所谓硬件加速）。保证了渲染的低延迟。

浏览器对3D的支持

WEBGL标准的实现，使利用浏览器进行3D绘图成为可能
这里引用wiki百科的一段介绍

WebGL (Web Graphics Library) is a JavaScript API for rendering 3D graphics within any compatible web browser without the use of plug-ins.[2] WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics an