threejs学习随记（一）

     搞浏览器3D绘图的应该都或多多少接触过threejs，其之于webGL，如jquery之于js。有了webGL，开发者仅通过遵循其提供的api和js就能在html网页中进行3d绘图。而直接使用原生的webGL API 进行3d绘图十分繁琐，所以一个优秀的webGL框架——threeJs应运而生，其包装了很多复杂的细节，使3d绘图变得轻松了起来。

    

     在Three.js中，要渲染物体到网页中，我们必须构建场景（scene）、相机（camera）和渲染器（renderer）。有了这三样东西，才能将物体渲染到网页中去。

ThreeJS绘图的核心：

1. 设置渲染器renderer
2. 设置场景 scene
3. 设置相机 camera
4. 设置光源 light
5. 设置物体 object

1)  渲染器

     渲染器的作用就是将相机所拍摄到的场景内容渲染到2d的画布上，从而在浏览器中展示。Threejs中的渲染器主要是WebGLRender。创建一个渲染器的方式就是new一个WebGLRender实例。

代码示例如下：

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

      创建渲染器实例后，需要设置其画布大小，渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的。画布需要append进页面的某个元素中（这里是body）才能在浏览器中得以显示。

2)  场景

    场景就是物体所处的环境，其作用就是一个容器。用来放置物体，灯光和相机。换句话说，开发时创建的物体，灯光和相机都需要将其添加进场景中，只有这样才能进行正确渲染。Ps：经过测试，相机其实可以不用添加进场景。创建一个场景的方式就是new一个scene实例。

代码示例如下：

var sc