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

 

posted @ 2021-11-29 16:54  H柷H  阅读(424)  评论(0编辑  收藏  举报