WebGl、Threejs的初步学习

WebGL 使得在支持HTML 的 canvas 标签的浏览器中，不需要安装任何插件，便可以使用基于 OpenGL ES 2.0 的 API 在 canvas 中进行2D和3D渲染。WebGL程序包括用 JavaScript 写的控制代码，以及在图形处理单元（GPU, Graphics Processing Unit）中执行的着色代码（GLSL，注：GLSL为OpenGL着色语言）。WebGL 元素可以和其他 HTML 元素混合使用，并且可以和网页其他部分或者网页背景结合起来。

步骤：

1. 初始化WebGL绘图上下文
2. 初始化着色器程序
3. 建立模型和数据缓存
4. 完成绘制和动画

webgl可以使用纹理图片，例如创建一个3D地球展示湖泊海洋。

three.js是WebGL的一个开源框架，three.js使用面向对象的方式来构建程序，包含3个基本对象： 场景（scene）, 相机（camera）, 以及一个渲染器（renderer）。

    // 调用THREE.Scene()通过new实例化一个场景对象scene
    var scene = new THREE.Scene(); // 场景
    var camera = new THREE.Camera(); // 相机
    var renderer = new THREE.WebGLRenderer(); // 创建渲染器对象
	var point = new THREE.PointLight(0xffffff);// 点光源
	var ambient = new THREE.AmbientLight(0x444444);//环境光
	var geometry