<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();
    renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.outputEncoding = THREE.sRGBEncoding;
		renderer.gammaFactor = 2.2;
    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, 50, 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 );
  
    
				sky = new THREE.Sky();
				sky.scale.setScalar( 450000 );
				scene.add( sky );
  
				var effectController = {
					turbidity: 10,
					rayleigh: 2,
					mieCoefficient: 0.005,
					mieDirectionalG: 0.8,
					inclination: 0.49, // elevation / inclination
					azimuth: 0.25, // Facing front,
					sun: ! true
				};
					var uniforms = sky.material.uniforms;

					uniforms[ "turbidity" ].value = effectController.turbidity;
					uniforms[ "rayleigh" ].value = effectController.rayleigh;
					uniforms[ "mieCoefficient" ].value = effectController.mieCoefficient;
					uniforms[ "mieDirectionalG" ].value = effectController.mieDirectionalG;
uniforms[ "sunPosition" ].value.set(400000, 400000, 400000);
  
     

const grid = new THREE.InfiniteGridHelper(10, 100, null, null, 'xyz' );

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