<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.min.js"></script>

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

var mesh, renderer, scene, camera, controls;



    renderer = new THREE.WebGLRenderer("webgl2");
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

const gui = new dat.GUI();

    scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( -200, 1.6, 400 );
    camera.lookAt(new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls( camera, renderer.domElement );
    
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    
    var light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 80, 80, 80 );
    scene.add( light );
  


const grid = new THREE.InfiniteGridHelper(0.5, 100);

const color = {
  value: 0xffffff
};

gui.add(grid.material.uniforms.uSize1, "value", 2, 100).step(1).name("Size 1");
gui.add(grid.material.uniforms.uSize2, "value", 2, 1000).step(1).name("Size 2");
gui.add(grid.material.uniforms.uDistance, "value", 100, 10000).step(1).name("Distance");
gui.addColor(color, "value").name("Color").onChange( function() { grid.material.uniforms.uColor.value.set( color.value ); } );;


scene.add(grid);
  function animate() {

      requestAnimationFrame( animate );

      renderer.render( scene, camera );

  }



animate();