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