() translation by (you can also view the original English article)
Three.js es un open-source JavaScript library/API utilizado para crear y mostrar animaciones y gráficos 3D en navegadores web, compatible con el elemento canvas de HTML5, WebGL y SVG. En este articulo "Como aprender", vamos a explorar las capacidades de este motor y compartir recursos y sugerencias para ayudarle a usted a iniciar el desarrollo de juegos con él de forma inmediata.
Por qué usar Three.js?
Desde que Three.js fue lanzado por primera vez por Ricardo Cabello en GitHub en 2010, el código base se ha mantenido de forma continua y mejorándose por una creciente comunidad que continuamente da su apoyo. El conjunto de funciones integradas es extenso, e incluye:
- renderers (Canvas, WebGL, and SVG)
- escenas (se puede cambiar el tiempo de ejecución, importación y exportación)
- camaras (perspectiva y ortográfica)
- luces (punto fijo, punto luminoso, direccional y de ambiente; los objetos pueden generar y recivir sombras)
- texturas y materiales (Lambert, Phong, etc., incluyendo soporte para mapas de relieve y mapas especulares)
- geometrias (incluyendo lineas, planos, cubos, esferas, poliedros, cilindros, sistema de partículas y texto 3D)
- utilidades para exportar a Three.js archivos compatibles con JSON desde software de modelado 3D (como Blender, 3ds Max o Maya) y importar archivos(como Wavefront (.obj) o Collada (.dae))directamente dentro de la escena
- shaders (proporcionan acceso completo al lenguaje OpenGL Shading para un control más directo de la canalización de gráficos)
- una biblioteca de shaders de post-procesamiento (incluyendo bloom, blur, detección de borde, Fresnel, sepia y ilustración)
- una biblioteca de efectos estereoscópicos (Anaglyph, Parallax/Cross-eyed, y Oculus Rift)
Más de 100 ejemplos ilustran estas características (y más), se incluyen en el repositorio principal, y muchos otros sitios ofrecen una colección de ejemplos con código fuente disponible. Además, ya que la biblioteca está escrita en Javascript, es fácil de ponerse en marcha rápidamente, así como también implementarlo en nuestro trabajo.
Juegos y Visualizaciones Notables
HexGL
Juego futurista de carreras creado por Thibaut Despoulain:
Trigger Rally
Un juego de carreras de automóvil creado por Jasmine Kent:
Artículos de desarrollo relacionados que se pueden encontrar en Jasmine's Gamasutra blog.
ChuClone
Un juego de plataformas 2.5D renderizado en 3D, con un editor incorporado de niveles en directo, creado por Mario Gonzalez:
Marble Table
Un juego con temática de fútbol en mesa creado por Jerome Etienne:
Astray
Un juego de laberinto creado por Rye Terrell:
CubeSlam
Un juego de ping-pong 3D que incorpora chat de vídeo dentro del juego, creado por Google:
Más información se puede encontrar en página Chrome Experiments sección de juegos and este artículo detrás de las escenas.
Encuentra tu camino a OZ
Un recorrido interactivo creado por Walt Disney y UNIT9
Más información se puede encontrar en página Chrome Experiments sección de juegos.
Primeros Pasos
Puesto que Three.js es una librería Javascript, configurar el entorno de desarrollo es particularmente fácil: los únicos requisitos son un editor de texto y un navegador web. Dicho esto, los editores de texto con características como el resaltado de sintaxis / plegado, soporte de coincidencia, mapa del documento, y así sucesivamente - tales como Notepad++ o Sublime Text - proporcionarán una mejor experiencia de codificación.
En cuanto a los navegadores web, tanto Google Chrome y Mozilla Firefox tienen excelente soporte WebGL. Google Chrome tiene un conjunto especialmente útil de herramientas de desarrollo integradas que pueden simplificar en gran medida los procesos del flujo de trabajo, como una consola que se pueden utilizar para la depuración y la inspección de los valores y objetos Javascript, y la configuración del espacio de trabajo le permiten editar y guardar archivos de origen desde dentro del navegador. Más detalles se pueden encontrar en el sitio Chrome DevTools.
Tip: También es posible escribir código usando Three.js completamente online, utilizando servicios como jsFiddle, como lo demuestra este ejemplo.Sin embargo, esta opción se utiliza normalmente sólo para el intercambio de ejemplos o demostraciones con pequeñas cantidades de código.
Para conseguir Three.js, primero vaya a the GitHub repo. Habrá un botón que dice "Download ZIP" que te permitirá descargar todo el código en el repositorio como un archivo ZIP. (Hay otras alternativas, como la clonación o bifurcar el repositorio utilizando Git, que son innecesarios para el usuario medio - estas opciones son principalmente útil sólo si va a contribuir al código fuente o a la documentación en línea.)
Una vez descargado y descomprimido el archivo en un directorio de su elección, un paso importante más queda antes de poder ver la mayor parte de los ejemplos en su propia computadora. Muchos proyectos Three.js implican contenido Cargado desde archivos externos (como imágenes), pero, por razones de seguridad los navegadores web restringen este comportamiento por defecto. Las dos opciones para resolver este problema son o bien cambiar la configuración de seguridad de su navegador web o ejecutar los archivos desde un servidor local
La primera opción es la más sencilla (por ejemplo, cambiar la configuración de Google Chrome en Windows se puede lograr mediante la creación de un acceso directo para Chrome y editar la ruta de acceso para incluir el indicador --allow-file-access-from-files). Las instrucciones para ambas opciones se pueden encontrar en la wiki oficial, en la página titulada How to run things locally.
JavaScript
Three.js está escrito en Javascript, por lo que es recomendable que tenga un conocimiento práctico de este lenguaje. Hay una gran cantidad de recursos de libre acceso a través de Internet para esto; dos recursos interactivos especialmente destacados son:
- Codecademy, que contiene un gran número de lecciones interactivas con información sensible e inteligente, además de un glosario fácil de usar
- Eloquent Javascript, un libro de texto digital gratuito escrito por Marijn Haverbeke, que incluye un entorno de codificación interactiva que recorre todos los ejemplos incluidos y permite al lector editar y experimentar con el código de ejemplo
Three.js
Para aprender cómo configurar una escena básica en Three.js (incluyendo una discusión sobre las escenas, cámaras, procesadores, mallas, y el bucle de animación), visita: El manual oficial. Otra gran introducción a la creación de una escena básica es el artículo Getting Started with Three.js por Paul Lewis
Un estudio introductorio más completo de las capacidades de Three.js es la excelente presentación de James Williams (un vídeo y diapositivas) en Introduction to WebGL and Three.js.
Siguientes Pasos
La documentación de Three.js, está disponible en http://threejs.org/docs/, es un trabajo en progreso, pero un buen primer lugar para tener una idea de muchas de las funciones disponibles.
Una forma más completa para aprender sobre el funcionamiento interno de la biblioteca está para buscar el código fuente de la colección oficial de ejemplos en http://threejs.org/examples/, que a menudo se muestran primero en la biblioteca, el material más destacado. Otro recurso, que consta de ejemplos comentados simplificados y minuciosamente escrito para los principiantes, es la colección en http://stemkoski.github.io/Three.js/. Además, muchos proyectos Three.js se anuncian en Twitter con el #ThreeJS hashtag o en el Three.js subreddit.
Dos colecciones particularmente impresionantes e inspiradoras de proyectos Three.js avanzadas son:
- AlteredQualia, creado por Branislav Ulicny (@alteredq,uno de los mayores contribuidores a la biblioteca Three.js)
- JavaScript + WebGL, creado por Klas Kroon (aka OutsideOfSociety, @oosmoxiecode)
Algunos sitios web y blogs que tratan sobre el desarrollo y con frecuencia destacan proyectos Three.js son:
- Learning WebGL, originalmente creado por Giles Thomas; el editor en jefe actual es Tony Parisi
- Learning Three.js, escrito por Jerome Etienne
- japh(r)'s Three.js posts, escrito por Chris Strom
Para obtener más información sobre las bases de los gráficos 3D, echa un vistazo a Interactive 3D Graphics, un curso en línea gratuito impartido por Eric Haines que cuenta con video conferencias y ejercicios de programación interactivas utilizando Three.js.
Si necesita incorporar funciones más allá de las proporcionadas por Three.js, es fácil (y de práctica común) para incorporar bibliotecas adicionales Javascript, tales como:
- Tween.js: una biblioteca para valores de interpolación de forma automática, útiles para animaciones fluidas
- Physi.js: un motor de física diseñado para su uso con Three.js
- dat.GUI: una interfaz gráfica de usuario de peso ligero para las variables cambiantes
- Gamepad.js: una biblioteca que simplifica la entrada de procesamiento de mandos y joysticks
Si desea crear efectos gráficos avanzados más allá de los que se incluyen con Three.js, usted necesitará aprender a escribir shaders,que son funciones que se ejecutan directamente en la GPU. Dos excelentes introducciones a shaders, escritas específicamente para los usuarios de Three.js, son:
- Intro to Pixel Shaders in Three.js, escrito por Felix Turner
- An Introduction to Shaders, escrito por Paul Lewis
Por último, si usted está interesado en desplegar su proyecto para Android o iOS, Ludei's CocoonJS es una plataforma que hace exactamente eso. El proceso esta bien documentado y es relativamente fácil, ya que la mayoría del trabajo está automatizado por el Sistema de Compilación CocoonJS Cloud.
Dónde Buscar Ayuda?
Si usted tiene una pregunta que no se puede entender mirando los ejemplos o recursos mencionados, el lugar para ir en busca de ayuda es Stack Overflow, el principal sitio de preguntas y respuestas para los programadores profesionales y entusiastas. Primero, busca si tu pregunta ya fue respondida anteriormente; si no, regístrate y pregunta allí!
Conclusión
Con estos recursos a su disposición, es el momento de empezar a crear! Three.js tiene una comunidad activa y vibrante, por lo que siempre debe sentirse libre de hacer preguntas, participar en las discusiones, y mostrar su trabajo. Buena suerte para todos ustedes en sus esfuerzos!
¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!
