Share
Three.js es una biblioteca / API de JavaScript de código abierto que se utiliza para crear y mostrar gráficos de computadora animados en 3D en un navegador web, compatible con el elemento de lienzo HTML5, WebGL y SVG. En este artículo de Cómo aprender, exploraremos las capacidades de este motor y compartiremos recursos y sugerencias para ayudarlo a comenzar a desarrollar juegos con él de inmediato..
Desde que Three.js fue lanzado por primera vez por Ricardo Cabello a GitHub en 2010, el código base se ha mantenido y mejorado continuamente por una comunidad creciente y solidaria. El conjunto de características incorporadas es extenso e incluye:
Más de 100 ejemplos que ilustran estas características (y más) se incluyen en el repositorio principal, y muchos otros sitios proporcionan colecciones de ejemplos con el código fuente disponible. Además, dado que la biblioteca está escrita en Javascript, es fácil de instalar y ejecutar, así como de implementar su trabajo..
Un juego de carreras futurista creado por Thibaut Despoulain:
Un juego de carreras de automóviles creado por Jasmine Kent:
Se pueden encontrar artículos relacionados con el desarrollo en el blog de Jasmine Gamasutra..
Un juego de plataformas 2.5D renderizado en 3D, con un editor de niveles en vivo integrado, creado por Mario Gonzalez:
Un juego de canicas / fútbol creado por Jerome Etienne:
Un juego de laberinto creado por Rye Terrell:
Un juego de ping-pong en 3D que incorpora chat de video dentro del juego, creado por Google:
Puede encontrar más información en la página de Experimentos de Chrome del juego y en este artículo detrás de escena..
Un viaje interactivo creado por Walt Disney y UNIT9.
Más información está disponible en la página de Experimentos de Chrome del juego..
Dado que Three.js es una biblioteca de Javascript, configurar su 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 / plegado de sintaxis, la coincidencia de corchetes, un mapa del documento, etc., como Notepad ++ o Sublime Text, proporcionarán una mejor experiencia de codificación..
En cuanto a los navegadores web, tanto Google Chrome como Mozilla Firefox tienen un excelente soporte de WebGL. Google Chrome tiene un conjunto particularmente útil de herramientas integradas para desarrolladores que pueden simplificar enormemente el proceso de flujo de trabajo, como una consola que se puede usar para depurar e inspeccionar objetos y objetos de Javascript, y la configuración del espacio de trabajo que le permite editar y guardar archivos de origen. desde dentro del navegador. Más detalles se pueden encontrar en el sitio de Chrome DevTools.
Propina: También es posible escribir código usando Three.js completamente en línea, usando servicios como jsFiddle, como lo demuestra este ejemplo. Sin embargo, esta opción normalmente solo se usa para compartir ejemplos o demostraciones con pequeñas cantidades de código.
Para configurar Three.js, primero ve al repositorio de GitHub. Habrá un botón que dice "Descargar ZIP" que le permitirá descargar todo el código en el repositorio como un archivo ZIP. (Existen otras alternativas, como la clonación o el forking del repositorio con Git, que no son necesarias para el usuario promedio; estas opciones son principalmente útiles solo si planea contribuir con el código fuente o la documentación en línea).
Artículos RelacionadosUna vez que haya descargado y descomprimido el archivo en un directorio de su elección, queda un paso importante antes de poder ver la mayoría de los ejemplos en su propia computadora. Muchos proyectos de Three.js implican cargar contenido desde archivos externos (como imágenes), pero, por razones de seguridad, los navegadores web restringen este comportamiento de forma predeterminada. Las dos opciones para resolver este problema son cambiar la configuración de seguridad en su navegador web o ejecutar archivos desde un servidor local.
La primera opción es la más sencilla (por ejemplo, se puede cambiar la configuración de Google Chrome en Windows creando un acceso directo para Chrome y editando la ruta para incluir la bandera). --permitir acceso a archivos desde). Las instrucciones para ambas opciones se pueden encontrar en la wiki oficial, en la página titulada Cómo ejecutar las cosas localmente.
Three.js está escrito en Javascript, por lo que se recomienda que tenga un conocimiento práctico de este idioma. Hay una gran cantidad de recursos disponibles gratuitamente en Internet para esto; Dos recursos interactivos particularmente destacados son:
Para aprender a configurar una escena básica en Three.js (incluida una discusión sobre escenas, cámaras, renderizadores, mallas y el bucle de animación, visite: el manual oficial. Otra excelente introducción para crear una escena básica es el artículo Cómo comenzar con Three.js de Paul Lewis
Una encuesta introductoria más completa sobre las capacidades de Three.js es la excelente presentación de James Williams (un video y una presentación de diapositivas) en Introduction to WebGL y Three.js.
La documentación de Three.js, disponible en http://threejs.org/docs/, es un trabajo en progreso pero un buen primer lugar para obtener una idea de muchas de las funciones disponibles.
Una forma más completa de conocer el funcionamiento interno de la biblioteca es buscar el código fuente de la colección oficial de ejemplos en http://threejs.org/examples/, que a menudo se titula por el aspecto de la biblioteca que más describen. prominente característica Otro recurso, que consiste en ejemplos simplificados y bien comentados escritos para principiantes, es la colección en http://stemkoski.github.io/Three.js/. Además, muchos proyectos de Three.js se anuncian en Twitter con el hashtag #ThreeJS o en el subreddit de Three.js.
Dos colecciones particularmente impresionantes e inspiradoras de proyectos avanzados de Three.js son:
Algunos sitios web y blogs que tratan sobre el desarrollo y con frecuencia presentan proyectos de Three.js incluyen:
Para obtener más información sobre los fundamentos de los gráficos por computadora en 3D, visite Interactive 3D Graphics, un curso en línea gratuito impartido por Eric Haines que presenta conferencias en video y ejercicios de programación interactiva utilizando Three.js.
Si necesita incorporar una funcionalidad más allá de la provista por Three.js, es fácil (y es una práctica común) incorporar bibliotecas de JavaScript adicionales, tales como:
Si desea crear efectos gráficos avanzados más allá de los que se incluyen con Three.js, deberá aprender a escribir sombreadores, que son funciones que se ejecutan directamente en la GPU. Dos excelentes introducciones a los sombreadores, escritas específicamente para los usuarios de Three.js, son:
Finalmente, si está interesado en implementar su proyecto para Android o iOS, CocudeJS de Ludei es una plataforma que hace exactamente eso. El proceso está bien documentado y es relativamente fácil, ya que la mayoría del trabajo está automatizado por el sistema de compilación en la nube CocoonJS.
Si tiene una pregunta que no puede resolver mirando los ejemplos o los recursos anteriores, el lugar al que puede acudir para obtener ayuda es Stack Overflow, el principal sitio de preguntas y respuestas para programadores profesionales y entusiastas. Primero, busque si su pregunta ya fue hecha; Si no es así, regístrese para obtener una cuenta y solicítela allí.!
Con estos recursos a su disposición, ¡es hora 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. La mejor de las suertes para usted en sus esfuerzos.!
Accentsconagua