Fallenstedt/simple cube scene

## simple cube scene
<html>
<head>
  <title>My first three.js app</title>
  <style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
  </style>
</head>
<body>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
  <script>
  var scene = new THREE.Scene();
  scene.fog = new THREE.Fog(0x00000, 0.015, 20);

  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

  var renderer = new THREE.WebGLRenderer();
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;
  renderer.setSize( window.innerWidth, window.innerHeight );
  document.body.appendChild( renderer.domElement );

  var light = makeSpotLight()
  scene.add( light );

  var plane = makePlane()
  scene.add( plane );

  var cube = makeCube()
  scene.add( cube );

  camera.position.y = 3;
  camera.position.x = -2;
  camera.position.z = 2;
  camera.lookAt(cube.position)

  function makeSpotLight() {
    var light = new THREE.SpotLight( 0xffffff, 4, 50, 20, 1, 2 );
    light.position.set( 5, 5, 5 );
    light.shadowMapWidth = 4096; // default is 512
    light.shadowMapHeight = 4096; // default is 512
    light.castShadow = true;
    return light
  }

  function makePlane() {
    var geometry = new THREE.PlaneGeometry( 900, 20, 60 );
    var material = new THREE.MeshLambertMaterial( {color: 0x23282d, side: THREE.DoubleSide} );
    var plane = new THREE.Mesh( geometry, material );
    plane.receiveShadow = true;
    plane.position.set(0, -4, 0)
    plane.rotation.set(-89 * (180/Math.PI), 0, 0)
    return plane
  }

  function makeDirectionalLight(x, y, z) {
    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
    directionalLight.position.set( x, y, z ).normalize();
    return directionalLight
  }
  function makeCube() {
    var geometry = new THREE.BoxGeometry( 1, 1, 1 );
    var material = new THREE.MeshLambertMaterial( { color: 0x778899 } );
    var mesh = new THREE.Mesh( geometry, material );
    mesh.castShadow = true;
    return mesh
  }

  var animate = function () {
    requestAnimationFrame( animate );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
  };

  animate();
</script>

</body>
</html>
	<html>
	<head>
	<title>My first three.js app</title>
	<style>
	body { margin: 0; }
	canvas { width: 100%; height: 100% }
	</style>
	</head>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/88/three.min.js"></script>
	<script>
	var scene = new THREE.Scene();
	scene.fog = new THREE.Fog(0x00000, 0.015, 20);

	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

	var renderer = new THREE.WebGLRenderer();
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	var light = makeSpotLight()
	scene.add( light );

	var plane = makePlane()
	scene.add( plane );

	var cube = makeCube()
	scene.add( cube );

	camera.position.y = 3;
	camera.position.x = -2;
	camera.position.z = 2;
	camera.lookAt(cube.position)

	function makeSpotLight() {
	var light = new THREE.SpotLight( 0xffffff, 4, 50, 20, 1, 2 );
	light.position.set( 5, 5, 5 );
	light.shadowMapWidth = 4096; // default is 512
	light.shadowMapHeight = 4096; // default is 512
	light.castShadow = true;
	return light
	}

	function makePlane() {
	var geometry = new THREE.PlaneGeometry( 900, 20, 60 );
	var material = new THREE.MeshLambertMaterial( {color: 0x23282d, side: THREE.DoubleSide} );
	var plane = new THREE.Mesh( geometry, material );
	plane.receiveShadow = true;
	plane.position.set(0, -4, 0)
	plane.rotation.set(-89 * (180/Math.PI), 0, 0)
	return plane
	}

	function makeDirectionalLight(x, y, z) {
	var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
	directionalLight.position.set( x, y, z ).normalize();
	return directionalLight
	}
	function makeCube() {
	var geometry = new THREE.BoxGeometry( 1, 1, 1 );
	var material = new THREE.MeshLambertMaterial( { color: 0x778899 } );
	var mesh = new THREE.Mesh( geometry, material );
	mesh.castShadow = true;
	return mesh
	}

	var animate = function () {
	requestAnimationFrame( animate );

	cube.rotation.x += 0.01;
	cube.rotation.y += 0.01;

	renderer.render(scene, camera);
	};

	animate();
	</script>

	</body>
	</html>