EffectHub.com: your best source for gaming

Recommendation

More Effects...

var renderer, scene, camera, world;

// Handle resizing the window so that the aspect ratio is maintained 
window.onresize = function () {
	camera.aspect = window.innerWidth/window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
}

// Utilities
function randomFloat(a, b){
	var r =  (Math.random() * (b - a) + a);
	return r;
}

function clamp(num, min, max){
	return Math.min(Math.max(num, min), max);
}

function World() {
	this.bgColors = [[10, 10, 55], [55, 33, 22], [99, 99, 255]];
	this.obj = new THREE.Group();
	this.dirLight;

this.init = function() {

var citySize = randomFloat(5, 30);
		var density = Math.random() + .2;

// Ground
		var mat = new THREE.MeshLambertMaterial({color: 0xff0000, emissive: 0x110033});
		var o = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), mat.clone());
		// o.material.color.setHex(0xffffff);
		o.rotation.x = -Math.PI/2;
		o.receiveShadow = true;
		o.castShadow = false;
		this.obj.add(o);

var block = new THREE.Mesh(new THREE.BoxGeometry(.8, 1, .8), mat);
		block.castShadow = true;
		block.receiveShadow = true;

for(var x = 0; x < citySize; x++){
			for(var z = 0; z < citySize; z++){
				if(Math.random() * ((x - citySize/2)*(x - citySize/2) + (z - citySize/2)*(z - citySize/2))/20 < density){
					var newBlock = block.clone();
					newBlock.position.set(x - citySize/2, 0, z - citySize/2);
					newBlock.scale.y = randomFloat(.1, .5) * (citySize/((x - citySize/2)*(x - citySize/2) + (z - citySize/2)*(z - citySize/2)));
					newBlock.scale.y = clamp(newBlock.scale.y, .1, 50);

if(Math.random() < .1){
						newBlock.scale.x = randomFloat(.1, 5);
					}
					if(Math.random() < .1){
						newBlock.scale.z = randomFloat(.1, 5);
					}					
					
					this.obj.add(newBlock);
				}
			}
		}
		scene.add(this.obj);
	}
	this.init();

}

window.onkeydown = function (e) {
	console.log(e.keyCode);
	if(e.keyCode === 32){
		scene.remove(world.obj);
		world = new World();
	}
}

// Set up three js scene
window.onload = function(){
	renderer = new THREE.WebGLRenderer({antialias: true});
	renderer.shadowMapEnabled = true;
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(20, window.innerWidth/window.innerHeight, 0.1, 1000);
	renderer.setSize(window.innerWidth, window.innerHeight);
	document.body.appendChild(renderer.domElement);
	camera.position.z = 100;
	camera.position.y = 50;
	camera.rotation.x = -0.785398/2;

scene.add(new THREE.AmbientLight(0x666666));
	var dirLight = new THREE.DirectionalLight( 0xffffff, 2, 5000);
	dirLight.position.set(-50, 25, 0);
	dirLight.shadow.mapSize.width = 4096;
	dirLight.shadow.mapSize.height = 4096;
	dirLight.castShadow = true;
	
	scene.add(dirLight);

var dlSub = new THREE.DirectionalLight(0xff00ff, .5, 500);
	dlSub.position.set(-5, -5, -5);
	scene.add(dlSub);

scene.rotation.y = Math.PI/4;

scene.background = new THREE.Color(0xff0000);

world = new World();

render();
}

var render = function (){
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}

CSS

HTML

Recommendation

Join Effecthub.com