JS3D (alpha), efectos 3d con Javascript

Por el 26 de abril de 2007

en: Sin categoría

JS3D es una librería que nos permite tener objetos 3d interactivos en nuestra web.

Ver Ejemplo

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.

¿Cómo utilizarlo?

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.

Código fuente del ejemplo

<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&iacute;mbolo:<input type="text" class="text" name="text" size="3" value="*" /><br />

<input type="button" class="addButton" value="A&ntilde;adir Punto" onClick="addFormPoint();" />
</form>
<form id="customLine">
<h2>L&iacute;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&iacute;mbolo:<input type="text" class="text" name="text" size="3" value="*" /><br />
<input type="button" class="addButton" value="A&ntilde;adir L&iacute;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&iacute;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&ntilde;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.

3) Unreal Soccer

Un juego de fútbol.

4) Plasma Demo

5) Clon del clásico Arkanoid

Enlaces Relacionados

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

  • Entradas relacionadas:
  • No hay coincidencias

Dejar un comentario