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
6 + 1 = requerido (control anti-SPAM)
¿De qué color es el cielo?: requerido (control anti-SPAM)
 

"Gracias por todos los artículos que has publicado día a día, gracias por el esfuerzo y la enseñanza que nos has brindado, es una bendición que en este mundo existan personas como tu, que compartan conocimientos, ideas y filosofía propia sin pedir nada a cambio, ese esfuerzo tuyo ha hecho en mi un seguidor oculto y muy recurrente a este tu blog...
debo mencionar que este artículo me ha dejado pasmado de las bonitas palabras y el gran mensaje que dejas para con tus hijos, y yo personalmente he aprendido mucho y valoro tu filosofía, ya que no es fácil comprender o ver la vida desde un cierto punto, mas aun cuando somos nosotros mismos los que nos enfocamos en otras cosas que creemos que son importantes, de vivir a ciegas si saber que perdemos tiempo imitando, muchas gracias por los artículos que escribes, un saludo y un abrazo desde Perú y mis felicitaciones por tu dedicación en este blog, muchos éxitos.
"

por "Ian Augusto P. T." en feb 14, 2014


en camino a la singularidad...

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