three.js画网格

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

//PerspectiveCamera(fov, aspect, near, far) 
//- fov 可视角度 
//- aspect 为width/height,通常设置为canvas元素的高宽比。 
//- near近端距离 
//- far远端距离 
//只有离相机的距离大于near值，小于far值，且在相机的可视角度之内，才能被相机投影到



            camera.position.x = 0;
            camera.position.y = 1000;//摄像机在哪个位置；这么设置，会有4根线看不见，将相机位置升高，看得视野更大，就可以看到全部21根线条了
            camera.position.z = 0;
            camera.up.x = 0;
            camera.up.y = 0;
            camera.up.z = 1;//坐标系哪个方向在上面
            camera.lookAt({//摄像机从（0，1000，0）看向（0，0，0）
                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();
            geometry.vertices.push( new THREE.Vector3( - 500, 0, 0 ) );

            geometry.vertices.push( new THREE.Vector3( 500, 0, 0 ) );

var material = new THREE.LineBasicMaterial( { vertexColors: true } );

var color1 = new THREE.Color( 0x000000 ), color2 = new THREE.Color( 0xff0000 );
geometry.colors.push( color1, color2 );



            for ( var i = 0; i <= 20; i ++ ) {
   var line = new THREE.Line( geometry, material, THREE.LinePieces );
               // var line = new THREE.Line( geometry, new THREE.LineBasicMaterial( { color: 0x000000, opacity: 0.2 } ) );
                line.position.z = ( i * 50 ) - 500;
                scene.add( line );

   var line = new THREE.Line( geometry, material, THREE.LinePieces );
                 line.position.x = ( i * 50 ) - 500;
                line.rotation.y = 90 * Math.PI / 180;//沿y轴逆时针旋转90度；

              //实际上是把（-500,0,0）（500,0,0）这条线逆时针旋转90度，旋转之后设定x为-500

                scene.add( line );

            }

        }

        function threeStart() {
            initThree();
            initCamera();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene, camera);
        }