THREE.LineSegments로 격자 그리기

3D 에서 개발하다보면 위치 확인차 바닥면을 기준으로 볼 수 있는 그리드가 필요해서 만들어 보았다.

    var size = 100;  // 격자 가로 세로 크기
    var step = 10;   // 격자 간격

    var halfSize = Math.floor( size / 2 );
    var geometry = new THREE.Geometry();
    var material = new THREE.LineBasicMaterial( { color : 0x333333, opacity : .3, transparent : true } );

    for ( var i = -halfSize; i <= halfSize; i+= step ) {

      geometry.vertices.push( new THREE.Vector3( -halfSize, 0, i ) );
      geometry.vertices.push( new THREE.Vector3( halfSize, 0, i ) );
      geometry.vertices.push( new THREE.Vector3( i, 0, -halfSize ) );
      geometry.vertices.push( new THREE.Vector3( i, 0, halfSize ) );

    }

    var line = new THREE.LineSegments( geometry, material );
    scene.add( line );