Categorías: Web

Crear Animaciones 3D con Three.js

El boom de los últimos tiempos informáticos para los desarrolladores ha sido el del nuevo paradigma de los FrameWorks, estos juegan un papel importante al momento de ahorrar código, ahorrar tiempo de entrega en los proyectos, etc, etc. Ahora les compartiré sobre un FrameWork del cual leí y me pareció bastante interesante ya que esta orientado para diseñadores y animadores Web, el responsable de estas «maravillas» es Three.js. Y digo interesante ya que con este script se pueden hacer muchas animaciones en 2D y 3D realmente impresionantes haciendo uso de las tecnologías WebGL, Html5, y por supuesto del navegador, el cual es indispensable que tenga soporte para WebGL.

Ahora bien, el script lo pueden encontrar en la pagina oficial de Three.js, en la parte de Download. Lo primero que tenemos que hacer es bajar el Framework, se descargara un archivo compreso el cual pesa 75.2 Mb, pero descuiden, ese no es el peso del script, este pesa 5.37 Kb 😉 en aquel archivo compreso encontraran documentación, ejemplos y obviamente el script, este ultimo lo encontraran en la carpeta src, de nombre Three.js.

Bueno, una vez descargado lo ubicamos donde deseemos en nuestro proyecto Web y lo añadimos al head de nuestro Html como cualquier otro script:

  

Como Usar Three.js?

Bueno, ya hay una vaga idea de la finalidad del script y de donde podemos conseguirlo, pero ahora necesitamos saber como funciona en realidad 😀 Para esto he encontrado dos webs las cuales tienen buenos tutoriales:

Pagina oficial (Ingles).
Blog (Español).
Un videillo 😀

Que se puede hacer con Three.js?

Si has llegado hasta este punto es por que estas interesado en lo que puedas llegar a hacer con este FrameWork, asi que mostrare algunos ejemplos de lo que se puede hacer con este script 😀

Ejemplo nacimiento árbol.
Manipulación caja con teclado.
Movimiento figuras.
Catalogo Carro en 3D.

Ademas de animaciones podremos realizar objetos de gran calidad, de tipo 3D:

Como pudieron ver con los anteriores ejemplos, el script es bastante potente para el diseño de animaciones en la web, solo hay que tener nociones en JavaScript para poder usar sus características sin problemas, y mucha creatividad.

Si te ha gustado el post, compártelo, regala un like ó comenta 😉

WP Dev JaGonzalez

Hijo, esposo y padre de un hermoso niño. Amante de los animales, la tecnología, informática y programación. Si tienes alguna duda, inquietud, comentario o deseas comunicarte directamente conmigo, puedes enviarme un correo electrónico a admin@jagonzalez.org

Compartir
Publicado por
WP Dev JaGonzalez

Entradas recientes

iPhone Hackeado: Qué Hacer para Proteger tu Dispositivo y Asegurar tu Seguridad

¿Has notado aplicaciones desconocidas o un drenaje inesperado de la batería? Estos podrían ser indicios…

4 meses hace

Cómo Restablecer un iPhone a su Estado de Fábrica

Saber cómo Restablecer un iPhone a su Estado de Fábrica es clave para solucionar problemas…

4 meses hace

Motorola planea lanzar al menos dos nuevos teléfonos Moto G en septiembre

Motorola ha confirmado el lanzamiento de Moto G84 5G y Moto G54 5G en India,…

1 año hace

El equipo de WizardLM afirma que un modelo de IA de terceros les robó el trabajo

Recuerde WizardCoder, ¿el codificador de IA que cubrimos recientemente aquí en Windows Report? Nos jactamos…

1 año hace

Las fallas del complemento Jupiter X Core amenazaron a 172.000 sitios web con apropiaciones de cuentas

Los investigadores han descubierto numerosos fallos de seguridad en el complemento WordPress Jupiter X Core…

1 año hace

Consola portátil Xbox: aquí tienes todo lo que necesitas saber al respecto

Para solucionar problemas del sistema de PC con Windows, necesitará una herramienta dedicada Fortect es…

1 año hace