en: Sin categoría
JS3D es una librería que nos permite tener objetos 3d interactivos en nuestra web.
El efecto 3d se crea a partir de letras ó símbolos que forman un determinado objeto cómo podemos ver en este ejemplo (Compatible con Firefox).
Está todavía en su versión alpha por lo que se pueden encontrar algunos errores, es compatible con Firefox y Safari pero aún no lo es con alguna versión de Explorer.
Para utilizar esta librería debemos de poseer conocimientos de javascript y HTML puedes descargar la libreria aquí (Libre con licencia GPL), una vez descargado debes copiarlo en algún directorio accesible por tu web.
Pongamos un ejemplo asumiendo que se encuentra en el directorio /js/js3d.
<style type="text/css">
h2 {
font-size:14px;
font-weight:bold;
}
#controlPanel {
position:absolute;
left:520px;
border: thin dashed black;
padding:5px;
}
#controlPanel input {
font-size:18px;
}
#controlPanel input.addButton {
background-color: #CC9900;
}
#controlPanel input.shapeButton {
background-color: #333333;
color:#FFFFFF
}
#controlPanel input.text {
background-color: #CC9966;}
#caption {
position: absolute;
top:410px;
width:500px;
margin: 0px;
padding:3px;
left:10px;
border:thin dashed black;
}
</style>
<script type="text/javascript" src="http://www.tufuncion.com/js/js3d.js"></script>
<script type="text/javascript">
var canvas;function mmove(e) {
//matrix = identity();
//matrix = translate(rField.clientWidth/2, rField.clientHeight/2,-300);
//alert("fah");
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
canvas.resetMatrix();
// This translate means that we won’t get negative values of z.
canvas.matrix = canvas.translate(0,0,-300);
canvas.matrix = canvas.rotateY(posx/100);
canvas.matrix = canvas.rotateX(posy/100);
canvas.paint();
}
function init() {
canvas = new JS3D("canvas");
canvas.matrix = canvas.translate(0,0,-300);
}
function addFormPoint() {
var form = document.getElementById("customPoint");
canvas.addPoint(form.x.value,form.y.value,form.z.value,form.text.value);
}
function addFormLine() {
var form = document.getElementById("customLine");
canvas.addLine(parseInt(form.x1.value),
parseInt(form.y1.value),
parseInt(form.z1.value),
parseInt(form.x2.value),
parseInt(form.y2.value),
parseInt(form.z2.value),
parseInt(form.ticks.value),
form.text.value);
}
function addShape(name) {
if (name=="dodecahedron") {
var m = identity();
m=scale(100,100,100,m);
for (var a = -1; a < 2; a+=2) {
for (var b = -1; b < 2; b+=2) {
for (var c = -1; c < 2; c+=2) {
canvas.addPoint(a,b,c,"*",m);
if (a == 1) {
canvas.addPoint(0,PHI_INV*b,PHI*c,"*",m);
}
if (c == 1) {
canvas.addPoint(PHI_INV*a,PHI*b,0,"*",m);
}
if (b == 1) {
canvas.addPoint(PHI*a,0,PHI_INV*c,"*",m);
}
}
}
}
} else if (name=="axes") {
m = identity();
m = scale(200,200,200,m);
// m = rotateX(0.5,m);
var num = 5;
canvas.addLine(0,0,0,1,0,0,num,"x",m);
canvas.addLine(0,0,0,0,1,0,num,"y",m);
canvas.addLine(0,0,0,0,0,1,num,"z",m);} else if (name=="cube") {
var m = identity();
//m = translate(-100*Math.sqrt(2),-100*Math.sqrt(2),0,m);
m = scale(100,100,100,m);var num = 4;
canvas.addLine(-1,-1,-1,-1,-1,1,num,"*",m);
canvas.addLine(-1,-1,-1,-1,1,-1,num,"*",m);
canvas.addLine(-1,-1,-1,1,-1,-1,num,"*",m);canvas.addLine(-1,-1,1,1,-1,1,num,"*",m);
canvas.addLine(-1,-1,1,-1,1,1,num,"*",m);canvas.addLine(-1,1,-1,1,1,-1,num,"*",m);
canvas.addLine(-1,1,-1,-1,1,1,num,"*",m);canvas.addLine(1,-1,-1,1,-1,1,num,"*",m);
canvas.addLine(1,-1,-1,1,1,-1,num,"*",m);canvas.addLine(1,1,1,1,1,-1,num,"*",m);
canvas.addLine(1,1,1,1,-1,1,num,"*",m);
canvas.addLine(1,1,1,-1,1,1,num,"*",m);}
}
</script>
</head>
<body onLoad="init();">
<div align="right"><a href="http://www.tufuncion.com"><img border="0" src="/themes/pushbutton/logo.png" ?=""></a></div>
<div id="canvas" onMouseMove="mmove(event);" style="position:absolute;
left:10px;
top:10px;;
width:500px;
height:400px;
border:thin solid black;">
</div><div id="controlPanel">
<form id="specialShapes">
<input type="button" value="Dodecaedro" class="shapeButton"
onClick="addShape(‘dodecahedron’);canvas.paint();"/><input type="button" value="Cubo" class="shapeButton"
onClick="addShape(‘cube’);canvas.paint();"/>
<input type="button" value="Ejes" class="shapeButton"
onClick="addShape(‘axes’);canvas.paint();"/>
</form>
<form id="customPoint">
<h2>Punto Personalizado:</h2>
X:<input type="text" class="text" name="x" size="3"/>
Y:<input type="text" class="text" name="y" size="3" />
Z:<input type="text" class="text" name="z" size="3" />
Símbolo:<input type="text" class="text" name="text" size="3" value="*" /><br /><input type="button" class="addButton" value="Añadir Punto" onClick="addFormPoint();" />
</form>
<form id="customLine">
<h2>Línea Personalizada</h2>
Xcomienzo:<input type="text" class="text" name="x1" size="3" />
Ycomienzo:<input type="text" class="text" name="y1" size="3" />
>comienzo:<input type="text" class="text" name="z1" size="3" /><br />
Xfin:<input type="text" class="text" name="x2" size="3" />Yfin:<input type="text" class="text" name="y2" size="3" />
Zfin:<input type="text" class="text" name="z2" size="3" /><br />
# de Puntos:<input type="text" class="text" name="ticks" size="3" />
Símbolo:<input type="text" class="text" name="text" size="3" value="*" /><br />
<input type="button" class="addButton" value="Añadir Línea Personalizada" onClick="addFormLine();"/>
</form>
<form id="clearButton">
<input type="button" value="Borrar" onClick="canvas.clearPoints();"
style="background-color:#EE5555"/>
</form></div>
<div id="caption">
<h2>Trucos</h2>
<p>
Usa el control de la derecha para editar los objetos 3d, mueve el raton sobre la caja superior para rotar el modelo.
Para agregar una línea personalizada deberas dar todos los datos en pixeles.</p>
<p>
Es imposible colocar puntos mas alla de los 300px desde el origen debido a que algunos puntos podrian entonces estar localizados fuera del alcance del area señalizada.</p>
</div>
</body>
</html>
Aquí os dejo unos cuantos ejemplos de increibles aplicaciones hechas en Javascript, la mayoría de estos ejemplos no son compatibles con Internet Explorer, pero no hay problema la mayoria de usuarios que acceden a TuFunción utilizan Mozilla .
1) Canvascape
Juego en primera persona (esilo Doom) que da prueba de la potencia de esta tecnología.
2) MSX Emulator
Este proyecto muestra la verdadera potencia de javascript y canvas es un emulador de MSX (fue una arquitectura de microordenador de 8 bits que tuvo éxito en Europa), que incluye la posibilidad de carga y ejecución de roms.
Un juego de fútbol.
4) Plasma Demo
6 cosas que probablemente no conozcas sobre PHP
PHP y MySql una estrecha relación
Las 10 mejores librerías
Howto encriptar passwords en la base de datos
El framework más popular de Ajax
Manual y ejemplos con Smarty
8 lenguajes de programación que deberías aprender
Generar documentos OpenOffice con PHP
Entrevista a Marten Mickos, CEO de MySql
Urls amigables
Fácil sistema de autentificación (login, password) PHP
Bases de datos y PHP