texto:   A-   A+
eliax

Cubo que rota en 3D en puro Javascript
eliax id: 5675 josé elías en oct 20, 2008 a las 02:31 AM ( 02:31 horas)
Si programas páginas web en Javascript, y te interesa el campo de los gráficos en 3D, visita esta próxima página que crea un cubo que rota en 3D con tu solo mover el ratón. Lo mas asombroso de todo es el compacto código. Simplemente vean el código fuente de la página para que vean lo sencillo que fue hacer esto.

Si son creativos pueden modificar esto para hacer cosas bien interesantes, como un menú de aplicaciones en 3D, o substituir las cruces por caras de personas, etc.

Enlace a la página

autor: josé elías

Comentarios

  • Realmente compacto el codigo! Eso es tener ingenio... Lo estuve revisando un poco y no logro entender de que manera podria cambiar las cruces por imagenes distintas... si bien no programo en javascript entiendo lo basico de este lenguaje... si alguien me puede dar una mano sera agradecida!

    Sldos!

    • A ver si me puedo explicar :

      var i = 27;
      while (i--)
      {
         document.write('');
      }

      primero escribes en el documento 27 caracteres que son los que forman el cubo y le vas dando a cada uno un id de nombre 'l'+ un numero del 1 al 27 para identificarlo luego...

      la funcion f() sera la que dibujara todo el cubo pero antes hacemos que esta se ejecute cada cierto intervalo de tiempo, por defecto 9 milisegundos.

      body onmousemove="a = event.clientX / 99; b = event.clientY / 99;" cuando el mouse se posicione en el documento la variable *a* tomara el valor de la coordenada x/99 y *b* sera la coordenada del raton y/99.

      los tres *For* de la funcion les atribuyen a *x* *y* y *z* un valor entre -1 y 1, esto para identificarlos dentro del arreglo de 27 caracteres del cubo, por ejemplo x=-1 y=-1 z=-1 o x=-1 y=0 z=1, lo cual indicarça en que posicion del cubo se encuentra la cruz que estamos tratando...

      u2 = u * Math.cos(a) - v * Math.sin(a);
      v2 = v * Math.cos(b) - w * Math.sin(b); para posicionar al caracter dentro de la pantalla habrça que hacer una serie de calculos usando los senos y cosenos, recordar que para "aparentar" que estamos dibujando en 3d tendremos que usar funciones trigonometricas donde existira otro factor aparte de espacio a la izquierda de la pantalla y hacia arriba, que es la tercera dimension en z o profundidad (tendran que entender trigonometria jeje)
      *w* nos servira para determinar el tamaño que dibujaremos el caracter *+* y el color que tendra, mientras mas grande sea este numero sera mas grande y los valores red y green del RGB() seran mayores.

      with (document.all('l' + i).style)
                  {
                     left = 300 + u * (w + 2) * 50;
                     top = 300 + v * (w + 2) * 50;
                     color = 'rgb(' + c + ', ' + c + ', 0)';
                     fontSize = (w + 2) * 16 + "px";
                  }
      aqui formateamos el caracter que estemos tratando, lo identificamos con la id 'l'+i y lo colocamos en left y top segun los valores que hayamos obtenido con *u* y *v* el color y el tamaño de letra

      espero no haber dejado mas confuso el asunto jeje. le entendi a mi manera pero no se si supe darme a explicar... :)

      saludos...

Añadir Comentario

tu nombre
tu email
(opcional)
web personal
(opcional)
en respuesta a...
comentario de caracteres máximo
8 + 8 = requerido (control anti-SPAM)
¿De qué color es el cielo?: requerido (control anti-SPAM)
 

"Creía que había perdido la capacidad de sorprenderme... Que suerte que estaba equivocado."

por "S.." en jun 2, 2014


en camino a la singularidad...

©2005-2024 josé c. elías
todos los derechos reservados
como compartir los artículos de eliax