//创建场景

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