Saltar al contenido

Empieza con WebGL y tres.js usando esta útil lista

¿Ansioso por empezar con WebGL y 3.js, pero no tiene idea de por dónde empezar? Relájate, respira hondo y deja que esta lista de recursos te guíe en el camino.

Recursos en línea

Mi curso sobre WebGL y los fundamentos de la Three.js es un gran punto de partida. Sí, puede que sea un poco parcial, pero creo que he preparado un curso muy bueno para ponerte al día en WebGL y 3.js en poco más de dos horas. Empezarás con una breve historia de WebGL y tres.js, y luego pasarás por los fundamentos como las mallas, la iluminación y los materiales, y también por temas más avanzados como la detección de colisiones y los motores de física. Finalmente, todo se cierra con la creación de una versión en 3D del clásico juego Frogger. También puedes ver ejemplos del curso aquí. Y el juego Frogger está disponible aquí mismo.

Empieza con WebGL y tres.js usando esta útil lista
Empieza con WebGL y tres.js usando esta útil lista

También hay que destacar un pequeño taller que creé para el campamento de MelbJS en tres.js.

Libros

Para aquellos de ustedes que prefieren aprender de algo un poco más tangible, les recomiendo lo siguiente:

  • Programación de juegos 3D para niños: No dejes que los niños muerdan el título para desanimarte. Este es un gran libro para ponerse al día muy rápidamente y tiene una sólida explicación de algunas de las matemáticas detrás de la programación 3D. Lo leí en un fin de semana y lo recomendaría mucho.
  • Learning Three.js: The JavaScript 3D Library for WebGL: Este libro da una excelente visión general del marco y es bueno tenerlo a mano como referencia. También vale la pena notar que el autor incluyó todos los ejemplos del libro en línea (asegúrate de revisar estos… ¡algunos son realmente increíbles!).
  • WebGL en funcionamiento: El autor Tony Parisi fue uno de los tipos detrás de la especificación VRML y algunos otros estándares relacionados con el 3D. Así que puedes estar seguro de que realmente sabe de lo que está hablando. Me gusta que cubra algunos temas avanzados, junto con algunos grandes ejemplos. Una cosa que no me gusta tanto es que los ejemplos utilizan una biblioteca del autor (sim.js), lo que hace que sea un poco más difícil de traducir si no quieres utilizar esta biblioteca.

Sitios web

Y luego, por supuesto, hay varios sitios web estupendos que puedes consultar para ayudarte en el camino.

  • Tres.js Ejemplos: Este es un gran conjunto de ejemplos a los que me he referido frecuentemente para conceptos más avanzados. Vale la pena notar que estos ejemplos usan una versión más antigua de la biblioteca, así que puede que tengas que modificar el código un poco.
  • Los conceptos de WebGL: Gran explicación de cómo funciona WebGL en un nivel inferior.
  • Fundamentos de WebGL: Esto proporciona otra buena visión general de cómo funciona el WebGL.
  • Aprendiendo WebGL: ¿Quieres aprender a usar WebGL sin un marco? Este sitio es para ti.
  • La biblioteca de física de Physisjs para tres.js envuelve otra biblioteca llamada ammo.js (un puerto Emscripten de Bullet). Physijs facilita la incorporación de la física del mundo real a tus escenas, y contiene algunos ejemplos impresionantes que puedes usar como punto de partida para tus aplicaciones.
  • TF3DM: ¿No es un artista 3D? No hay problema. Este echa un vistazo a un gran conjunto de modelos fácilmente buscables, disponibles en varios formatos. Tengan en cuenta que algunos modelos son libres de usar y otros no.
  • La licuadora: Dirígete aquí si buscas un paquete de modelado de código abierto gratis. No es lo más fácil de usar, y tiene una curva de aprendizaje empinada. Es casi seguro que tendrás que trabajar con algunos tutoriales, pero es una aplicación poderosa… y es gratis.
  • OpenGameArt: Este es un buen recurso de texturas e imágenes para sus juegos y aplicaciones.

Empezando desde cero

Por favor, no es que aunque todos estos son grandes recursos para ayudarte a empezar con WebGL y 3.js, algunos son un poco más complejos que otros. Para evitar sentirte frustrado por el momento en que termines, considera comenzar tu viaje con el curso mencionado y el libro sobre programación 3D para niños. Después de eso, puedes sumergirte en el resto.

Para más información, también puedes ver las diapositivas y ejemplos de mi seminario web sobre cómo empezar a usar WebGL y three.js.