¡Advertencia!
Este tema no ha tenido respuestas en más de un mes. Recuerda que si deseas añadir una nueva debes cumplir con las normas de la web.
Programación [Aporte] [jQuery] Build de...
En esta oportunidad les traigo una actualización de la versión 5.0 del Build de baldosas.
Las novedades son las siguientes:
  • Modo dinámico agregado al esquema tridimensional
  • Acercar / alejar cámara usando el eje Y del evento del ratón (arriba = acercar, abajo = alejar)



<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
	background-Color:#111;
	-moz-user-select: none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-o-user-select: none;
	user-select: none;
}
#piso {
	height: 640px;
	width: 640px;
	-webkit-transform-style: preserve-3d;
	position: relative;
	margin: 0 auto;
	-webkit-transform: rotateX(60deg) rotateZ(45deg);
}
.baldosa {
	width:64px;
	height:64px;
	background-color: rgba(50, 50, 50, .7);
	position: absolute;
	border:1px solid #555;
}
.baldosa:hover { background-color: rgba(100, 100, 100, .8) }
.grosor {
	width:64px;
	height:30px;
	background-color: rgba(50, 0, 0, 1);
	-webkit-transform-style: preserve-3d;
	position:absolute;
	border:1px solid #555;
}
.uno { -webkit-transform: rotateX(-90deg) rotateY(0deg) translateZ(48px) translateY(15px) }
.dos { -webkit-transform: rotateX(-90deg) rotateY(90deg) translateZ(32px) translateY(15px) translateX(-16px)}
.tres { -webkit-transform: rotateX(-90deg) rotateY(180deg) translateZ(16px) translateY(15px) }
.cuatro { -webkit-transform: rotateX(-90deg) rotateY(270deg) translateZ(32px) translateY(15px) translateX(16px)}
</style>
<script>
/*!
 * Build de Baldosas 3D v5.1 - jQuery
 *
 * Autor: Joaquin A. (SoyJoaquin. o -Null-)
 * http://phperos.net
 *
 * Contacto:
 * Email: hgcproductions@hotmail.com
 * Skype: SoyJoaquin.
 *
*/

var emX;
var emY;
var balH;
var balW;
var mapa = 	[[1,1,1,1,1,1,1,1],
			[1,1,1,1,1,1,1,1],
			[1,1,0,0,1,1,1,1],
			[1,1,0,0,1,1,1,1],
			[1,1,1,1,1,1,0,0],
			[1,1,1,1,1,1,0,0],
			[1,1,1,1,0,0,0,0],
			[1,1,1,1,0,0,0,0]];


$(document).ready(function (){
	emX = 150;
	emY = 0;
	balH = 64;
	balW = 64;
	loadBaldosa();
	
	var estaX = 45; var estaY = 1; var x; var y; var press; var pX; var pY; var escala;
	$('body').mousedown(function(a){
		press = true; pX = a.pageX; pY = a.pageY;
	}).mouseup(function(a){
		press = false; estaX = x; estaY = y;
	}).mousemove(function(b){
		if(press){
			x = Math.round(-(b.pageX-pX) estaX);
			y = Math.round(-(b.pageY-pY) estaY);
			escala = y/50;
			escala = (escala<1)? 1 : escala;
			escala = (escala>3)? 3 : escala;
			$('#piso').css('WebkitTransform', 'rotateX(60deg) rotateZ(' x 'deg) scale3d(' escala ',' escala ',' escala ')');
		}
	});
});

function loadBaldosa() {
	var id = 0;
	for(x=0;x<mapa.length;x  ) {
		for(y=0;y<mapa[x].length;y  ) {
			if(mapa[x][y] == 1) {
				id  ;
				$("#piso").append('<div id="' id '" class="baldosa"><div class="grosor uno"></div><div class="grosor dos"></div><div class="grosor tres"></div><div class="grosor cuatro"></div></div>');
				resultadoX = (x * (balW));
				resultadoY = (y * (balH));
				$('#' id).css({
					position: "absolute",
					left: resultadoX,
					top: resultadoY
				});
			}
		}
	}
}
</script>
</head>
<body>
	<div id="piso"></div>	
</body>
</html>


http://fav.me/d61y5hq

Espero que les sea de utilidad.
Saludos.
Arquitecto, diseñador y programador | Comenzando a proyectar mi vida bajo mis propios ideales. Administrador de ilDom, Twiteck y Century21
Programación [Aporte] [jQuery] Build de...