three.js生成網絡地面

           
　　　　　　　　//初始化配置three
　　　　　　　　var scene ,camera,renderer
           scene = new THREE.Scene();
            var ambient = new THREE.AmbientLight(0xffffff);
            scene.add(ambient);
            var width = res.windowWidth; // 窗口寬度
            var height = res.windowHeight; // 高度
            var k = width / height; // 窗口寬高比
            var s = 20000; // 三維場景顯示范圍控制系數，系數越大，顯示的范圍越大
            // 創建相機對象（正射投影）
            camera = new THREE.PerspectiveCamera(-90, k, 1, s);
            // camera.position.set(0, 2000, 0); // 設置相機位置
            renderer = new THREE.WebGLRenderer({
                antialias: true
            });
            renderer.setSize(width, height); // 設置渲染區域尺寸
            renderer.setClearColor(0xffffff, 1); // 設置背景顏色
            const element = document.getElementById('three')
            element.appendChild(renderer.domElement);     

生成網格

        for (var i=0;i<=30;i++){
                let padding = 100
                var material = new THREE.LineBasicMaterial({
                    color: 0x000000,
                    opacity:i % 3 === 0 ? 0.6 : 0.2,
                    transparent: true
                });
                
                let rowGeometry = new THREE.Geometry();
                
                const lineLong = padding*30;
                rowGeometry.vertices.push(
                    new THREE.Vector3( padding*i ,lineLong  , 0 ),
                    new THREE.Vector3( padding * i,0, 0 )
            
                );
                let colGeometry = new THREE.Geometry();
                
                colGeometry.vertices.push(
                    new THREE.Vector3( lineLong, padding*i , 0 ),
                    new THREE.Vector3( 0,  padding*i , 0 )
                   
                );
                let rowLine = new THREE.Line( rowGeometry, material );
                let colLine = new THREE.Line( colGeometry, material );
 
                scene.add( rowLine);
                scene.add( colLine);
            }