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);

    }