20 impresionantes ejemplos para aprender WebGL con Three.js

Probablemente ya haya oído hablar de Three.js, una biblioteca que facilita el trabajo con 3D en el navegador. Con él, puede crear los componentes básicos del modelado 3D:cámaras, mallas, luces y más, y aplicarles animaciones. Three.js puede dibujar una escena usando un elemento Canvas, SVG, CSS3D o WebGL.

En este artículo, encontrará una colección de demostraciones, tutoriales y recursos que lo inspirarán a aprender más sobre la biblioteca.

Experimentos y demostraciones

Las demostraciones impresionantes que ves a continuación están hechas con la biblioteca Three.js y WebGL como renderizador. Es posible usar WebGL directamente, pero elegir Three.js facilita el desarrollo y da como resultado solo una fracción del código. Estas son algunas de las cosas que son posibles con la biblioteca:

1. nuclear

Nucleal es un experimento WebGL, impulsado por Three.js. Descompone las fotos en miles de partículas que son transformadas por la física. Puedes elegir cualquier combinación de foto, velocidad y efectos. Las animaciones se ejecutan sin problemas, lo que es aún más impresionante.

2. Luces

Lights es una experiencia visual increíble, impulsada por Three.js, que sincroniza colores y formas con la música. Vuelas a través de una escena llena de formas coloridas, con las que puedes interactuar haciendo clic. Se recomiendan auriculares.

3. Solo un reflector

“Just A Reflektor” es una película interactiva que le permite emitir una proyección virtual en la pantalla de su computadora al sostener su dispositivo móvil frente a la cámara web de su computadora. De esa forma, controlas todos los efectos visuales de la experiencia moviendo tu teléfono o tableta a través del espacio físico que te rodea. Vea algunos de los sorprendentes efectos en la página de tecnología y el video detrás de escena.

4. Globo de brazos

Arms Globe es un experimento de visualización que superpone el comercio mundial de armas pequeñas y municiones sobre un modelo de la tierra que puedes rotar en el espacio 3D. Puede filtrar el conjunto de datos por años y tipos de municiones. La visualización es muy impresionante y funciona sin problemas.

5. Hiperlapso de Google Street View

Este experimento descarga datos de Google Streetview entre dos destinos y los convierte en una animación del viaje. Puede hacer una pausa y mirar alrededor, o puede arrastrar un objetivo en el mapa en la parte superior derecha que seguirá la cámara. Espere unos minutos para que se cargue o mire este video para verlo en acción.

6. Encuentra tu camino a Oz

Este es un sitio web promocional de la película Oz el Grande y Poderoso. Combina bellas ilustraciones con HTML5 y WebGL en una experiencia inmersiva. Tiene lugar en el circo desde el principio de la película. Puedes interactuar con el entorno y usar tu cámara web.

7. Espíritu de la época de Google

Zeitgeist de Google para 2012 incluyó un mapa del mundo potenciado por WebGL que presentaba las tendencias de búsqueda y los eventos importantes del año pasado. Haga clic en el botón "Ver el año en revisión" para verlo.

8. Ironbane

Ironbane es un juego en línea multijugador masivo impulsado por WebGL y Three.js. Puedes recolectar artículos, interactuar con otros jugadores y explorar el mundo abierto. El juego sigue un estilo retro inspirado en Minecraft y funciona sin problemas. El juego es de código abierto y tanto el lado del cliente como el del servidor están escritos en JavaScript. Puedes jugar sin abrir una cuenta, así que puedes probarlo rápidamente por ti mismo.

9. Golpe de cubo

Cube Slam es mi juego favorito de Three.js de esta lista. Es un giro del clásico juego de pong, pero lo traslada al espacio 3D. Puedes jugar contra tus amigos o contra un oso controlado por computadora. El juego usa WebRTC para que veas un video de la cámara web de tu amigo. Para conocer el detrás de escena, lea esta publicación de blog de uno de los creadores.

10. hexadecimal

HexGL es un juego de carreras futurista y vertiginoso creado con HTML5, JavaScript y WebGL, con la ayuda de Three.js. Es un tributo a las series Wipeout y F-Zero originales. Es un juego gráficamente pesado, acercándose al nivel de los juegos de escritorio de hace unos años. Por suerte, puedes bajar el nivel de detalle antes de jugar. Aquí hay un video del autor del juego que explica cómo hizo el juego.

11. Laberinto mundial cromado

Este es un experimento de Chrome de Google que te permite convertir cualquier página web en un laberinto tridimensional a través del cual mueves una pelota. Lo que es aún más genial es que la pelota se controla desde tu teléfono inteligente.

12. HolaCorre

HelloRun es un juego WebGL impulsado por Three.js que te coloca en el casco de una nave espacial y te obliga a encontrar tu camino saltando obstáculos. El juego tiene excelentes efectos visuales y progresivamente se acelera y se vuelve más difícil.

13. Hola corredor

Hello Racer es una visualización impresionante de un auto de carreras de Fórmula 1, impulsado por WebGL y Three.js. Presenta reflejos y sombras realistas. Incluso puedes conducirlo con las teclas WASD.

14. Visualizador de coches 360

Este es otro experimento que presenta visualizaciones detalladas de automóviles. Esta vez puedes elegir el modelo de coche y el color. Los colores se aplican dinámicamente y todas las texturas se actualizan para que coincidan.

15. Cubo de Google Maps

Google Maps Cube es un juego que te presenta un cubo de mapas en 3D. Tu trabajo es conducir una bola por la ciudad y llegar a los puntos de control.

16. Tabla Periódica CSS3D

Esta es una demostración impresionante de Three.js. En lugar de WebGL, este experimento usa CSS3D para representar los cuadros de elementos químicos. Puede elegir entre cuatro diseños:tabla, esfera, hélice y cuadrícula.

17. Globo terráqueo WebGL

WebGL Globe es un experimento de visualización que, de forma similar al globo de brazos, presenta datos superpuestos en un globo que flota en el espacio 3D. Este ejemplo se centra en la población por ciudad, pero puede ver versiones con diferentes conjuntos de datos aquí.

18. Obsidiana

Obsidian es una demostración de WebGL que sincroniza formas y colores flotantes con la música. Aunque hay un control deslizante en la parte inferior, esto no es un video:los efectos se generan en tiempo real.

19. Red de Indra

Esta demostración presenta una red multidimensional de gotas de lluvia que se reflejan entre sí y el mundo que las rodea. Aunque se trata de una gran cantidad de objetos, la representación sigue siendo bastante rápida.

20. Creador de planetas

Planet Maker es una aplicación web con tecnología WebGL y Three.js que te permite crear planetas reales o imaginarios. Puede elegir entre varias opciones de textura de superficie, modificar la iluminación y la atmósfera, agregar o quitar nubes, cargar sus propias imágenes o envolverlas con un anillo.

Bonificación:WebGL Nyan Cat

Francamente, ninguna colección de recursos WebGL está completa sin un nyan cat. ¡Disfrútalo!

Encuentre demostraciones de WebGL aún más impresionantes aquí:

  • http://www.chromeexperiments.com/tag/webgl/
  • http://tresjs.org/
  • http://www.mrdoob.com/

Tutoriales y ejemplos

Ahora que está convencido de Three.js, ¿por dónde empieza? Aquí hay una colección de tutoriales, ejemplos, presentaciones y videos para comenzar.

Cómo empezar

  • Introducción a WebGL:esta es una presentación con ejemplos de código en vivo que le presentarán WebGL y Three.js.
  • Introducción a Three.js:un excelente tutorial que explica los conceptos básicos del modelado 3D con la biblioteca. Es fácil de leer y apto para principiantes.
  • Cómo empezar:este es el tutorial oficial de introducción. Explica los conceptos básicos para ejecutar Three.js.
  • Creación de partículas con Three.js:otro tutorial de Paul Lewis, en el que explica cómo desarrollar un sistema de partículas interesante (demostración).
  • Academia WebGL:si desea aprender WebGL puro, sin Three.js, puede seguir esta guía paso a paso. Aquí escribe código en un editor y ve una vista previa en tiempo real del resultado.

Ejemplos

  • Ejemplos básicos de Three.js:estos son ejemplos para principiantes, fáciles de seguir y bien documentados. Comience con esta página una vez que haya completado las publicaciones de introducción.
  • Ejemplos de Three.js de Stemkoski:esta página puede parecer que salió a finales de los 90, pero en realidad es bastante relevante. Alberga una gran colección de ejemplos de Three.js con código fuente detalladamente comentado, que cubre una amplia gama de temas.
  • Ejemplos oficiales de Three.js:estos ejemplos demuestran cada parte de la biblioteca. Desafortunadamente, el código fuente carece de comentarios y, en ocasiones, puede ser difícil de seguir.

Vídeos

  • Técnicas y rendimiento de WebGL es una presentación de una hora de duración de Google I/O en la que se tratan muchos temas.
  • WebGL 101 es un video instructivo muy bueno para principiantes, también enfocado en WebGL.
  • Introducción a Three.js es una presentación de 36 minutos para principiantes que deseen aprender sobre Three.js.

Más recursos

  • La referencia oficial de Three.js:debe marcarlo como favorito y tenerlo abierto en una pestaña en todo momento.
  • El wiki oficial:contiene una sección de preguntas frecuentes y enlaces a varios artículos y otros recursos que pueden resultarle útiles.
  • Learning Three.js:este es un blog dedicado a la publicación de tutoriales de Three.js. Cada publicación explica cómo hacer una de las demostraciones populares que ves en la web.
  • Editor de Three.js:este es un editor de código para three.js con vista previa en vivo. Puede usarlo para probar cosas rápidamente con la biblioteca. Puede compartir sus experimentos con otros y guardar su progreso.
  • Documentación alternativa:este es un índice generado automáticamente de todos los métodos en la biblioteca.
  • Página de Google+:aquí puede encontrar noticias actualizadas y enlaces sobre la biblioteca.
  • Preguntas SO, etiquetadas con three.js. Leer las preguntas y respuestas más populares ahora le ahorrará tiempo y dolores de cabeza más adelante.
  • Subreddit de WebGL:no se centra solo en three.js, pero vale la pena navegar de todos modos.

¿Conoce otros recursos que deberían incluirse aquí? Compártelas en la sección de comentarios.


No