Three.js PCG city

by IceCreamYou

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>

CSS

body {
  margin: 0;
}

JavaScript

var camera, scene, renderer;
			var geometry, material;

			function init() {

				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 );
				camera.position.y = 400;
				camera.position.z = 400;
        camera.rotation.x = -45 * Math.PI / 180;

				scene = new THREE.Scene();
				scene.background = new THREE.Color( 0x9db3b5 );
        scene.fog = new THREE.FogExp2(0x9db3b5, 0.002);

				geometry = new THREE.BoxGeometry( 1, 1, 1 );
        geometry.applyMatrix(new THREE.Matrix4().makeTranslation(0, 0.5,
     0));
				material = new THREE.MeshStandardMaterial( { color: 0xCCCCCC } );

				for (var i = 0; i < 250; i++) {
					var building = new THREE.Mesh( geometry.clone(), material.clone() );
          building.position.x = Math.floor(Math.random() * 200 - 100) * 4;
          building.position.z = Math.floor(Math.random() * 200 - 100) * 4;
          building.scale.x  = Math.random() * 40 + 10;
          building.scale.y  = Math.random() * building.scale.x * 8 + 8;
          building.scale.z  = building.scale.x;
					scene.add( building );
        }

  	  	var geo = new THREE.PlaneGeometry(2000, 2000, 20, 20);
        var mat = new THREE.MeshBasicMaterial({ color: 0x333333 });
     	  var floor = new THREE.Mesh(geo, mat);
        floor.rotation.x = -90 * Math.PI / 180;
        scene.add(floor);

				var light = new THREE.DirectionalLight(0xf6e86d, 1);
        light.position.set(1, 3, 2);
        scene.add(light);

				renderer = new THREE.WebGLRenderer( { antialias: true } );
				renderer.setSize( window.innerWidth, window.innerHeight );
				document.body.appendChild( renderer.domElement );				
				
			}

			function animate( time ) {
				renderer.render( scene, camera );
				requestAnimationFrame( animate );
			}

			init();
			requestAnimationFrame( animate );