THREE.js（一）

        //创建场景
        var scene = new THREE.Scene();
        //透视摄像机（视野角度，长宽比，远剪切面，进剪切面，）
        var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
        //渲染器
        var renderer = new  THREE.WebGLRenderer();
        //设置渲染器的大小
        renderer.setSize(window.innerWidth,window.innerHeight);
        //渲染器renderer的domElement元素，表示渲染器中的画布
        document.body.appendChild(renderer.domElement);
        //创建几何体(长，宽，高)
        var geometry = new THREE.CubeGeometry(2,2,2);
        //材质增加颜色
        var material = new THREE.MeshBasicMaterial({color:0x00ff00});
        //网格（几何体，材质）
        var cube = new THREE.Mesh(geometry,material);
        //场景增加几何体
        scene.add(cube);
        camera.position.z=5;
        function render(){
            requestAnimationFrame(render);
            cube.rotation.x += 0.1;
            cube.rotation.y += 0.1;
            //渲染（场景，相机）render( scene, camera, renderTarget, forceClear )
            //renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
            //forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除
            renderer.render(scene, camera);
        }
        render();

 按照功能分解成函数

        var renderer;
        function initThree(){
            width = document.getElementById('canvas-frame').clientWidth;
            height = document.getElementById('canvas-frame').clientHeight;
            renderer = new THREE.WebGLRenderer({
                antialias:true
            });
            renderer.setSize(width,height);
            document.getElementById('canvas-frame').appendChild(renderer.domElement);
            renderer.setClearColor(0xffffff,1.0)
        }
        
        var camera;
        function initCamera(){
            camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
            camera.position.x=0;
            camera.position.y=1000;
            camera.position.z=0;
            camera.up.x=0;
            camera.up.y=0;
            camera.up.z=1;
            camera.lookAt({
                x:0,
                y:0,
                z:0
            })
        }
        
        var scene;
        function initScene(){
            scene = new THREE.Scene();
        };
    
        var light;
        function initLight(){
            light = new THREE.DirectionalLight(0xff0000,1.0,0);
            light.position.set(100,100,200);
            scene.add(light);
        }
        
        var cube;
        function initObject(){
            var geometry = new THREE.Geometry();
            var material = new THREE.LineBasicMaterial({
                vertexColors:THREE.VertexColors
            });
            var color1= new THREE.Color(0x444444),
                color2= new THREE.Color(0xff0000);
            var p1 = new THREE.Vector3(-100,0,100);
            var p2 = new THREE.Vector3(100,0,-100);
            geometry.vertices.push(p1);
            geometry.vertices.push(p2);
            geometry.colors.push(color1,color2);
            var line = new THREE.Line(geometry,material,THREE.LinePieces);
            scene.add(line);
        }
        
        function render(){
            renderer.clear();
            renderer.render(scene,camera);
            requestAnimationFrame(render);
        }
        
        function threeStart(){
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            render();
        }
        threeStart();