Tag: camera

/* CSS Utility Functions -------------------------------------------------- */  var CssUtils = (function() {	 	var s = document.documentElement.style;  	var vendorPrefix =  		(s.WebkitTransform !== undefined && "-webkit-") || 		(s.MozTransform !== undefined && "-moz-") || 		(s.OTransform !== undefined && "-o-") || 		(s.msTransform !== undefined && "-ms-") || ""; 	 	return { 		translate: function( x, y, z, rx, ry, rz ) { 			return vendorPrefix + "transform:" + 				"translate3d(" + x + "px," + y + "px," + z + "px)" +	 				"rotateX(" + rx + "deg)" + 				"rotateY("  +ry + "deg)" + 				"rotateZ(" + rz + "deg);" 		}, 		origin: function( x, y, z ) { 			return vendorPrefix + "transform-origin:" + x + "px " + y + "px " + z + "px;"; 		}, 		texture: function( colour, rx, ry, rz ) { 			var a = Math.abs(-0.5+ry/180)/1.5; 			if (rz!==0) { 				a/=1.75; 			} 			return "background:"+vendorPrefix +"linear-gradient(rgba(0,0,0," + a + "),rgba(0,0,0," + a + "))," + colour + ";"; 		}		 	} }());   /* Triplet -------------------------------------------------- */  function Triplet( x, y, z ) { 	this.x = x || 0; 	this.y = y || 0; 	this.z = z || 0; }  /* Camera -------------------------------------------------- */  function Camera( world, x, y, z, rx, ry, rz) { 	this.world = world; 	this.position = new Triplet(x, y, z); 	this.rotation = new Triplet(rx, ry, rz);	 	this.fov = 600; }  Camera.prototype = { 	update: function() { 		if (this.world) { 			this.world.node.style.cssText= 				CssUtils.origin( -this.position.x, -this.position.y, -this.position.z) + 				CssUtils.translate( this.position.x, this.position.y, this.fov, this.rotation.x, this.rotation.y, this.rotation.z) 			} 		} }  /* Plane -------------------------------------------------- */  function Plane( colour, w,h,x,y,z,rx,ry,rz) { 	this.node = document.createElement("div") 	this.node.className="plane" 	this.colour = colour 	this.width = w; 	this.height = h; 	this.position = new Triplet(x, y, z); 	this.rotation = new Triplet(rx, ry, rz); 	this.update(); }  Plane.prototype = { 	update: function() { 		this.node.style.cssText +=  			"width:" + this.width + "px;" + 			"height:" + this.height + "px;" + 			CssUtils.texture(this.colour, this.rotation.x, this.rotation.y, this.rotation.z) + 			CssUtils.translate( this.position.x, this.position.y, this.position.z, this.rotation.x, this.rotation.y, this.rotation.z) 	} }  /* World -------------------------------------------------- */  function World( viewport ) { 	this.node = document.createElement("div") 	this.node.className = "world" 	viewport.node.appendChild(this.node) 	viewport.camera.world = this; }  World.prototype = { 	addPlane: function( plane ) { 		this.node.appendChild(plane.node) 	} }  /* Viewport -------------------------------------------------- */  function Viewport( node ) { 	this.node = document.createElement("div") 	this.node.className = "viewport" 	this.camera = new Camera() 	node.appendChild(this.node) }  window.onload = function() { 	 	var maxSpeed = 5; 	var accel = 0.2; 	var speed = 0; 	var viewport = new Viewport( document.body ); 	var world = new World( viewport ); 	var keyState = { 		forward: false, 		backward: false, 		strafeLeft: false, 		strafeRight: false 	}; 	var pointer = { x: 0, y: 0};  	function buildCube( colour, w, h, d, x, y, z, rx, ry, rz ) {  		world.addPlane( new Plane(colour, h, w, x, y, z, 0, 180, 90));		 		world.addPlane( new Plane(colour, w, d, x, y, z, 90, 0, 0)); 		world.addPlane( new Plane(colour, d, h, x, y, z, 0, 270, 0)); 		world.addPlane( new Plane(colour, d, h, x+w, y, z+d, 0, 90, 0)); 		world.addPlane( new Plane(colour, w, d, x+w, y+h, z, 90, 180, 0)); 		world.addPlane( new Plane(colour, w, h, x, y, z+d, 0, 0, 0)); 	}     // Teto 	world.addPlane( new Plane("url(imgs/tetos.png?3)", 800, 800, 400, 400, -447, -180, 180, 0));  	// Chão 	world.addPlane( new Plane("url(imgs/wood.jpg)", 800, 800, -400, 400, 53, 180, 0, 0)); 	// Chão Externo 	world.addPlane( new Plane("url(imgs/txtchao.gif?1)", 3000, 3000, -1500, 1500, 54, 180, 0, 0)); 	 	// Muro primario 	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, -1500, 1500, 54, 180, 90, 90)); 	 	// Muro secundario 	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, -1500, 54, 360, 270, 90)); 	 	// Muro ternario 	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, 1500, 54, 270, -180, -360)); 	 	// Muro Quaternario 	world.addPlane( new Plane("url(imgs/txtmuro.gif?1)", 3000, 400, 1500, -1500, -346, -270, 180, 360)); 	 	 	// Paredas 	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, 400, -400, -447, 270, 0,180));   //parede 4 	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, -400, -400, -447, -270, 0,0));   //parede 4 fora 	 	world.addPlane( new Plane("url(imgs/wall2.jpg?3)", 800, 500, -400, -400, -447, 270, 90, 180)); //parede 2  	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, -400, 400, -447, -360, -90, -90));   //parede 2 fora 	 	world.addPlane( new Plane("url(imgs/wall1.jpg?3)", 800, 500, -400, 400, -447, 90, 00, 0,0)); //parede 1  	world.addPlane( new Plane("url(imgs/wall.jpg?3)", 800, 500, 400, 400, -447, 270, 0, 180));   //parede 1 fora 	 	world.addPlane( new Plane("url(imgs/wall3.jpg?3)", 800, 500, 400, 400, -447, 90, 270, 0));   // Parede 3 	world.addPlane( new Plane("url(imgs/wall3f.jpg)", 800, 500, 400, -400, -446, 270, -270, 180));   //3fora  	// Tapete 	world.addPlane( new Plane("url(imgs/rug.jpg)", 200, 340, 100, -170, 52,0,180,0));  	// Mesa 	buildCube("url(imgs/desk.jpg)", 10, 10, 100, -50, -100, -49); 	buildCube("url(imgs/desk.jpg)", 10, 10, 100, 50, -100, -49); 	buildCube("url(imgs/desk.jpg)", 10, 10, 100, -50, 100, -49); 	buildCube("url(imgs/desk.jpg)", 10, 10, 100, 50, 100, -49); 	buildCube("url(imgs/desk.jpg)", 130, 250, 15, -60, -120, -65);  	// Cadeira 	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 135, -30, -4); 	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 135, 30, -4); 	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 75, -30, -4); 	buildCube("url(imgs/desk.jpg)", 10, 10, 55, 75, 30, -4); 	buildCube("#333", 60, 70, 15, 75, -30, -20); 	buildCube("#333", 10, 70, 95, 135, -30, -100);  	// Computador 	buildCube("#eee", 10, 120, 85, -30, -60, -170); 	buildCube("#fff", 40, 50, 2, -50, -25, -67); 	world.addPlane( new Plane("url(imgs/tela.png)", 110, 65,-19,-55,-165,90,90,0)); 	//buildCube("#333", 2, 50, 50, -50, -25, -118); 	world.addPlane( new Plane("#bbb", 2, 50,-33,-25,-115,90,0,20)); 	world.addPlane( new Plane("#999", 50, 50,-33,-25,-115,0,250,0)); 	world.addPlane( new Plane("#bbb", 2, 50,-31,25,-115,90,180,340)); 	world.addPlane( new Plane("#eee", 50, 50,-48,-25,-68,0,70,0)); 	world.addPlane( new Plane("#ddd", 2, 50,-30,-25,-115,0,160,0));  	// Teclado 	buildCube("url(imgs/mac-keybd.png)", 31, 70, 2, 10, -35, -67);  	// mouse 	buildCube("url(imgs/mouse.jpg)", 18, 10, 4, 20, 60, -69);  	 	//  base-mouse 	buildCube("url(imgs/base.jpg); border-radius:10px;", 40, 40, -1, 10, 52, -67); 	 	// Biblia 	buildCube("url(imgs/bib.png)", 40, 25, 5, -40, 90, -69); 	 	// revista 	buildCube("url(imgs/revista.jpg); border-radius:2px;", 50, 35, 1, 30, -120, -69); 	// celular 	buildCube("url(imgs/celular.jpg); border-radius:2px;", 28, 15, 2, 37, -70, -69);       //------> Caixa de papelão 	buildCube("url(imgs/fcx.jpg)", 70, 60, 1, 15, -200, 52);// fundo da caixa 	 	buildCube("url(imgs/lixo1.jpg)", 40, 25, 1, 23, -190, 50);// lixo1 na caixa 	buildCube("url(imgs/lixo2.jpg)", 38, 23, 1, 32, -170, 50);// lixo2 na caixa 	 	buildCube("url(imgs/pcx1.jpg)", 1, 60, 60, 15, -200, 0);// parede1 da caixa 	buildCube("url(imgs/pcx2.jpg)", 1, 60, 60, 85, -200, 0);// parede2 da caixa 	buildCube("url(imgs/pcx1.jpg)", 70, 1, 60, 15, -200, 0);// parede3 da caixa 	buildCube("url(imgs/pcx2.jpg)", 70, 1, 60, 15, -140, 0);// parede4 da caixa 	//------> Caixa de papelão 	 	// ---- > copo de lapis 	buildCube("#000030", 1, 10, 25, 15, -80, -94);//orizontal cima// 	buildCube("#000040", 1, 10, 25, 25, -80, -94);//orizontal baixo// 	buildCube("#333", 10, 10, -1, 15, -80, -69);//fundo// 	buildCube("#000020", 10, 1, 25, 15, -80, -94);//lateral esquerda// 	buildCube("#000050", 10, 1, 25, 15, -71, -94);//lateral direita// 	//< ----copo de lapis 	 	// ----- > Lapis 	buildCube("#ddd", 1, 1, 30, 20, -76, -100); 	buildCube("#111", 1, 1, 30, 18, -78, -100); 	buildCube("blue", 1, 1, 30, 16, -75, -100); 	buildCube("red", 1, 1, 30, 17, -72, -100); 	buildCube("yellow", 1, 1, 30, 19, -74, -100); 	buildCube("green", 1, 1, 30, 21, -77, -100); 	//< ---- Lapis 	 	//---- > Estante 	buildCube("url(imgs/desk1.jpg)", 10, 50, 300, -350, 345, -250);//Pé esquerdo  	buildCube("url(imgs/desk1.jpg)", 10, 50, 300, -150, 345, -250);//Pé direito 	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -250); // parte1 	//------------> partilheira  2 com seus livros 	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -160); // parte2  	buildCube("url(imgs/txtl1.jpg)", 6, 25, 40, -339, 352, -200); // Livro1-corpo 	buildCube("#ddd", 4, 24, 40, -338, 352, -200); // Livro1-folhas 	 	buildCube("url(imgs/txtl2.jpg)", 6, 25, 40, -332, 357, -200); // Livro2-corpo 	buildCube("#ddd", 4, 24, 40, -331, 357, -200); // Livro2-folhas 	// -------------- > partilheira com seus livros 	 	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, -65); // parte2 	buildCube("url(imgs/desk1.jpg)", 190, 50, 10, -340, 345, 30); // parte2     //< ----- Estante 	 	viewport.camera.position.x=-250 	viewport.camera.position.y=180 	viewport.camera.position.z=150 	viewport.camera.rotation.x=270 	viewport.camera.rotation.y=0 	viewport.camera.rotation.z=-60 	viewport.camera.update();  	window.addEventListener("devicemotion", function(ev) { 		keyState.forward = ev.accelerationIncludingGravity.z<-6; 		keyState.backward = ev.accelerationIncludingGravity.z>3; 	 	}, false); 	 	document.addEventListener("touchstart", function(ev) { 		pointer.x = ev.targetTouches[0].pageX; 		pointer.y = ev.targetTouches[0].pageY; 		ev.preventDefault(); 	}, false); 	 	document.addEventListener("touchmove", function(ev) { 		viewport.camera.rotation.x -= (ev.targetTouches[0].pageY - pointer.y)/2; 		viewport.camera.rotation.z += (ev.targetTouches[0].pageX - pointer.x)/2; 		pointer.x = ev.targetTouches[0].pageX; 		pointer.y = ev.targetTouches[0].pageY; 		ev.preventDefault(); 	}, false);  	document.addEventListener("mouseover", function(ev) { 		pointer.x = ev.pageX; 		pointer.y = ev.pageY;	 		document.removeEventListener("mouseover", arguments.callee) 	}, false); 	 	document.addEventListener("mousemove", function(ev) { 		viewport.camera.rotation.x -= (ev.pageY - pointer.y)/3; 		viewport.camera.rotation.z += (ev.pageX - pointer.x)/3; 		pointer.x = ev.pageX; 		pointer.y = ev.pageY; 	}, false);  	document.addEventListener("keydown", function(e) { 		//console.log(e.keyCode); 		switch (e.keyCode) { 			case 87: 				keyState.forward = true; 				break;	 			case 83: 				keyState.backward = true; 				break; 			case 65: 				keyState.strafeLeft = true; 				break; 			case 68: 				keyState.strafeRight = true; 				break;		 			 		} 	}, false);  	document.addEventListener("keyup", function(e) { 		switch (e.keyCode) { 			case 87: 				keyState.forward = false; 				break;	 			case 83: 				keyState.backward = false; 				break;	 			case 65: 				keyState.strafeLeft = true; 				break; 			case 68: 				keyState.strafeRight = true; 				break;		 				 		    case 37: // Left                if (cursor.x > 0) cursor.x--;                break;             case 38: // Top                if (cursor.y > 0) cursor.y--;                break;             case 39: // Right                if (cursor.x < 7) cursor.x++;                break;             case 40: // Bottom                if (cursor.y < 7) cursor.y++;                break; 			   		} 	}, false); 	 	 					 	// Loop  	(function() { 		if (keyState.backward) { 			if (speed > -maxSpeed) speed -= accel; 		} else if (keyState.forward) { 			if (speed < maxSpeed) speed += accel;	 		} else if (speed > 0) { 			speed = Math.max( speed - accel, 0); 		} else if (speed < 0) { 			speed = Math.max( speed + accel, 0); 		} else { 			speed = 0; 		} 		var xo = Math.sin(viewport.camera.rotation.z * 0.0174532925); 		var yo = Math.cos(viewport.camera.rotation.z * 0.0174532925); 		viewport.camera.position.x -= xo * speed; 		viewport.camera.position.y -= yo * speed; 		viewport.camera.update(); 		 		setTimeout( arguments.callee, 15);          	})(); }

body,html{height:100%;margin:0;overflow:hidden} .viewport{position:relative;float:left;overflow:hidden; width:100%;height:100%;background-image: url(imgs/ceu.jpg); background-attachment: fixed, scroll; background-size:100% 100%; -webkit-perspective:600px; -moz-perspective:600px; -ms-perspective:600px; perspective:600px; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d }  .world{position:absolute;left:50%;top:50%;-webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d} .plane{position:absolute;-webkit-transform-origin:0 0 0; -webkit-backface-visibility:hidden;-moz-transform-origin:0 0 0; -moz-backface-visibility:hidden;-ms-transform-origin:0 0 0; -ms-backface-visibility:hidden;backface-visibility:hidden}  #gun{background:url(imgs/contr.png); background-size:100% 100%; position:absolute;bottom:0;left:50%; z-index:2000;height:280px;width:420px;z-index:50000; -webkit-animation:gun 2.5s infinite;-moz-animation:gun 2.5s infinite;animation:gun 2.5s infinite} .notice{font:12px/1.5 Tahoma,Arial;position:absolute; background:rgba(0,0,0,.7);z-index:50001}  #update{bottom:20px;left:50%;width:360px;margin-left:-180px; text-align:center;font-size:120%;border-radius:7px}  #about{top:0;width:100%}  p{margin:0;padding:15px 20px;color:#fff}#about p:first-child{float:left}#about p:last-child{float:right}  #update a{display:block}a{color:#fc0}  kbd{display:inline-block;padding:0 5px;background:#eee;color:#000;border-radius:4px;border:1px solid #bbb;border-bottom:3px solid #999;-webkit-box-shadow:0 0 3px #000;box-shadow:0 0 3px #000} @-webkit-keyframes gun{50%{-webkit-transform:translateY(7px) scale(0.99)}}@-moz-keyframes gun{50%{-moz-transform:translateY(7px)}}@keyframes gun{50%{transform:translateY(7px)}}

<div id="gun"><kbd><a href="http://merotec32.000webhostapp.com/filmes.html" style=' font-size:14px; margin-left:30px; margin-right: 30px; padding:5px; min-height:32px; color:#333; text-decoration:none;'>CLIQUE PARA ASSISTIR FILMES</a></kbd></div> <div id="about" class="notice"> <p>Use <kbd>W</kbd> + <kbd>S</kbd> para andar na sala</p>  </div>