three.js初入门二

        在上一章节中，有简单的提到了three.js中的三大组件以及利用three.js怎么渲染到网页上的步骤，在这里没有对什么是webgl以及three.js进行讲解，如果对于这两概念不清楚的，烦请自行度娘；

        下面将贴出前一文章中的各个步骤的核心代码；

         1：创建场景（scene）:

                var  scene=new THREE.Scene();      //通过调用THREE.JS的Scene()方法创建一个场景；

         2：创建相机（camera）:

                var  camera=new THREE.PerspectiveCamera(45,width/height,1,1000);     //创建一个相机

                 camera.position.set(x,y,z);    //设置相机在空间中的位置；

                 参数详解：

                  fov:相机视椎体垂直角度；aspect相机视椎体宽高比；near:相机视椎体近裁剪面；

                  far:相机视椎体远裁剪面;

         3：创建渲染器（renderer）;

                var  renderer=new THREE.WebGLRenderer(parametres)；

                 renderer.setSize(width,height); //用于设置画布的大小，如果没有设置该值的话，渲染出来的画布大小将是canvas默认的大小，即width=300,height=150;

                 document.body.appendChild(renderer.domElement);//用于确定渲染器挂载到网页中的那个节点中；

                参数详解： parametres是一个可选的对象，在这里提一下，parametres这个对象中，有个antialias属性，该属性的作用是：是否开启反锯齿，所以该属性是一个boolean类型，默认值为false，建议一般将该值设置为true（自己一开始学习的时候，对于各个参数了解的不深，所以导致一开始没有设置该值，所以在做出来的效果中，页面会出现各种锯齿，导致页面很难看，这也算在学习过程中踩的一个坑吧）；

        4：最后使用渲染器的render方法将场景渲染到页面中：

               renderer.render(scene,camera);

        5：在调用渲染器的渲染方法进行渲染的时候，为了使得画面能够一直渲染进去，需要不断的调用渲染器的方法；所以对于第四步骤，可以写成如下所示：

              funciton  loop(){

                   renderer.render(scene,camera);

                   requestAnimationFrame(loop)

              }

         在这里使用h5的requestAnimationFrame()方法来定时刷新loop方法，requestAnimationFrame与传统的setInterval方法类似，不过它们之间还是存在一些区别的，关于它们之间的区别，这里就不详说了，有疑问的可以自行百度。