WebGL 小计

一。renderer 渲染器

//开启Three.js渲染器var renderer;//声明全局变量（对象）function initThree() {   width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽   height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高   renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象（属性：抗锯齿效果为设置有效）   renderer.setSize(width, height );//指定渲染器的高宽（和画布框大小一致）   document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。   renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)}

二。 camera相机

//设置相机              var camera;              function initCamera() {                 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴，右方向为X轴，沿着Z轴朝里（视野角：fov 纵横比：aspect 相机离视体积最近的距离：near 相机离视体积最远的距离：far）                camera.position.x = 0;//设置相机的位置坐标                camera.position.y = 50;//设置相机的位置坐标                camera.position.z = 100;//设置相机的位置坐标                camera.up.x = 0;//设置相机的上为「x」轴方向                camera.up.y = 1;//设置相机的上为「y」轴方向                camera.up.z = 0;//设置相机的上为「z」轴方向                camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标              }

三。scene 场景

　//设置场景              var scene;              function initScene() {                   scene = new THREE.Scene();              }

四。light 光源

//设置光源              var light;              function initLight() {                 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源                light.position.set( 200, 200, 200 );//设置光源向量                scene.add(light);// 追加光源到场景              }

五。object 物体

      var cube;    var mesh;    function initObject() {          var geometry = new THREE.CubeGeometry(100, 100, 200, 4, 4, 4); //几何图形        //  CubeGeometry(width, height, depth, segmentsWidth, segmentsHeight, segmentsDepth, materials, sides) //x,y ,z        var material = new THREE.MeshLambertMaterial({ color: 0xFFFFFF }); //材质        mesh = new THREE.Mesh(geometry, material); //贴图       // mesh.position = new THREE.Vector3(100, 0, 0);        mesh.position.set(100, 0, 0);        scene.add(mesh);}

六。执行

  function threeStart() {               initThree();        initCamera();        initScene();        initLight();        initObject();               }       

七。循环（按需）

 // 帧循环、游戏循环    function animation() {        mesh.rotation.x += 0.01;    //延X坐标轴旋转          renderer.render(scene, camera);        requestAnimationFrame(animation);    }