Desarrollo de juegos con Threejs

Rate this content
Bookmark

Hablemos sobre threejs, react three fiber y cómo comenzar a desarrollar juegos utilizando bibliotecas 3D y motores de física.

This talk has been presented at JS GameDev Summit 2023, check out the latest edition of this JavaScript Conference.

FAQ

3JS fue creado por Ricardo Cabelo en 2010 y ahora es mantenido por cientos de desarrolladores alrededor del mundo.

React ThreeFiber es un renderizador de React para Three.js, creado por Paul Henschell en 2019. Facilita la construcción de escenas de 3JS usando componentes de React, lo que ayuda a mantener el código organizado y legible.

React ThreeFiber permite una estructura más organizada y compacta del código al utilizar componentes. Esto facilita la reutilización de componentes y la configuración de propiedades desde el exterior del componente, mejorando la gestión del proyecto.

Sí, se pueden crear juegos usando 3JS. Aunque 3JS no es un motor de juegos por sí solo, se puede ampliar con bibliotecas adicionales de física y animación para desarrollar juegos interactivos y dinámicos directamente en el navegador.

Para aprender 3JS, puedes comenzar con recursos gratuitos como tutoriales en YouTube o la documentación oficial de 3JS. Si prefieres un enfoque estructurado, considera cursos pagos como '3JS Journey' de Bruno Simon, que cubre desde lo básico hasta niveles avanzados.

Para comenzar con 3JS, es esencial tener conocimientos de HTML, CSS y JavaScript. Estos conocimientos te permitirán manejar los fundamentos necesarios para trabajar con esta biblioteca de JavaScript.

3JS es una biblioteca de JavaScript de código abierto que se utiliza para crear experiencias interactivas en 3D en navegadores. Abstrae la complejidad de WebGL, permitiendo la ejecución de aplicaciones aceleradas por GPU sin necesidad de plugins adicionales.

Anderson Mancini
Anderson Mancini
22 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

¡Hola! Soy Anderson Mancini, un desarrollador creativo de Brasil. Sumérgete en el desarrollo de juegos con 3JS y descubre cómo puedes comenzar tu viaje. React ThreeFiber ofrece un enfoque más organizado y compacto para construir escenas utilizando componentes. Explora ejemplos emocionantes de lo que puedes construir con React ThreeFiber y 3JS. Aprende el proceso creativo de construir un juego utilizando 3JS y los cursos recomendados y recursos de aprendizaje. Los consejos de rendimiento para crear juegos con 3JS se discutirán en la sesión de mañana.
Available in English: Game Development with Threejs

1. Introducción al desarrollo de juegos 3JS

Short description:

¡Hola! Soy Anderson Mancini, un desarrollador creativo de Brasil. Sumergámonos en el desarrollo de juegos 3JS y cómo puedes comenzar tu viaje. Combiné mis habilidades de modelado 3D con mi experiencia en juegos y descubrí 3GS. Es una biblioteca de JavaScript de código abierto que crea experiencias interactivas en 3D en cualquier navegador. Abstrae la complejidad de WebGL y te permite ampliar sus funcionalidades.

¡Hola! Mi nombre es Anderson Mancini, y gracias por unirte a mí en la Cumbre de Desarrollo de Juegos JS. Hablaremos sobre el desarrollo de juegos 3JS y cómo puedes comenzar tu viaje aprendiéndolo. Así que sumerjámonos de lleno.

Por cierto, soy un desarrollador creativo de 43 años de Brasil, y soy fundador y CTO de Neltix, una empresa con sede en Brasil, por supuesto, como estudio creativo, y trabajo con empresas que buscan formas de aumentar la participación a través de interacciones digitales, y diría que por eso los juegos suelen formar parte de mi rutina diaria en mi trabajo. Y quiero hablarles sobre cómo terminé conociendo 3js de todos modos. Suelo decir que soy un desarrollador atrapado en un cuerpo de diseñador, como he trabajado con diseñadores de UI y UX desde que tenía 18 años, pero mi verdadera pasión siempre fue el modelado 3D. Me encanta esto. Y estaba buscando una forma de combinar mis conocimientos de modelado 3D que adquirí a lo largo de los años con mi experiencia en juegos. Y hace unos cuatro años, decidí llevar mis conocimientos de modelado 3D a la web de alguna manera. Y siento que la mayoría de los sitios web en mi país, especialmente, perdieron su atractivo después de que el macro media flash quedara obsoleto. Y el macro media flash era lo que estaba usando cuando estaba creando mis cosas antes de comenzar en este viaje. Y luego me enteré de 3GS. Así que fue increíblemente difícil encontrar a alguien para contratar en mi empresa en ese momento. Y luego decidí aprenderlo yo mismo, probarlo. Y lo que comenzó como un esfuerzo de aprendizaje rápidamente se convirtió en una obsesión apasionada. Y por eso estoy tan emocionado de estar aquí, de darte algunos tips en tu viaje, intentar enseñarte cómo mejorar tu forma de aprender 3GS, y mostrarte que aprender esto puede ser accesible y muy gratificante.

Así que hablemos de qué es 3GS de todos modos. 3GS es una biblioteca de JavaScript de código abierto. Se utiliza para crear experiencias interactivas en 3D en tu navegador. Fue creado por Ricardo Cabelo en 2010. Y ahora es mantenido por cientos de desarrolladores de todo el mundo. Yo diría que yo también estoy incluido de alguna manera. Abstrae la complejidad de WebGL, que es una forma muy compleja de crear 3D para la web. Pero básicamente eso significa que podemos ejecutar aplicaciones aceleradas por GPU sin ejecutar ni instalar nada adicional en tu computadora, lo que significa que no se necesitan complementos adicionales. Y es multiplataforma, lo que significa que tu trabajo puede ejecutarse en cualquier navegador. Y diría que más que navegadores. Cualquier navegador moderno puede admitir 3GS. Y podemos ampliarlo utilizando bibliotecas de física, bibliotecas de animación y muchas más cosas. Por lo tanto, puedes agregar funcionalidades a esta aplicación, a esta biblioteca. Y veamos cómo se ve en el código.

2. Renderizando un Cubo Giratorio con React ThreeFiber

Short description:

Así que puedo mostrarte un ejemplo simple de cómo renderizar un cubo giratorio en tu pantalla. React ThreeFiber es un renderizador de React para Three.js, creado por Paul Hanschell en 2019. Ofrece un enfoque más organizado y compacto para construir escenas utilizando componentes. Con un ecosistema extenso y recursos útiles de otros desarrolladores, React ThreeFiber permite una mejor comprensión y uso de la biblioteca.

Así que puedo mostrarte un ejemplo simple, un ejemplo muy simple, de cómo se ve en el código. Este es un ejemplo simple. Sé que no es emocionante en absoluto tener un cubo giratorio en tu pantalla, pero quiero mostrarte qué tan poco código necesitas para renderizar un cubo giratorio en tu pantalla. Y todo lo que está escrito allí, básicamente intenta imitar algo que sucede en nuestra vida real. Así que si fuera en la vida real, sería como un estudio o como un estudio de grabación de películas.

Para comenzar, necesitas tu escena. Necesitas tener un lugar para grabar tu película. Luego necesitas una cámara para grabar cosas. Luego necesitas un renderizador para poder ver lo que está siendo grabado por esa cámara y luego tienes actores u objetos que estarán grabando. Y esto es exactamente lo que está sucediendo en esas líneas. Es muy fácil de entender usando esta comparación.

Y también quiero hablar sobre React ThreeFiber. Entonces, React ThreeFiber, es más adecuado para ti probablemente si estás más familiarizado con el marco de React. Y veremos por qué. React ThreeFiber, por supuesto, es un renderizador de React para Three.js. Fue creado por Paul Hanschell en 2019 y ahora es mantenido por cientos de desarrolladores para la comunidad. Y puedes construir tus escenas utilizando componentes para mantener todo más legible y organizado. Veremos un ejemplo en unos minutos. Entonces, tus componentes pueden ser reutilizados. Tiene un ecosistema extremadamente extenso con muchas cosas nuevas que se lanzan como cada semana, diría yo. Y tenemos muchos ayudantes creados por otros desarrolladores que están disponibles de forma gratuita para que los usemos. Y podemos ver un ejemplo en el código. Este es exactamente el mismo, no emocionante en absoluto, cubo de rotación pero ahora estamos usando React ThreeFiber. Y como puedes ver, es mucho más organizado y compacto porque está utilizando componentes para estructurar todo. Por supuesto, donde está el componente principal, MyBox está utilizando una composición. Entonces, todo lo que se necesita para ese componente específico está compactado o empaquetado en este componente aislado. Y luego puedes importarlo en tu lienzo y tienes la misma escena. Y aquí tienes un ejemplo de una comparación entre FreeJS que ya es corto y React ThreeFiber. Por supuesto, es más simple porque está utilizando componentes pero lo que está sucediendo aquí, es básicamente el mismo código. Todo está organizado de una manera diferente para que puedas tener una mejor comprensión y un mejor uso de la biblioteca. Y no estoy tratando de convencerte de usar React ThreeFiber o React, solo estoy mencionando los beneficios de usar composiciones en tu trabajo.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Optimización de juegos HTML5: 10 años de aprendizaje
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimización de juegos HTML5: 10 años de aprendizaje
Top Content
PlayCanvas is an open-source game engine used by game developers worldwide. Optimization is crucial for HTML5 games, focusing on load times and frame rate. Texture and mesh optimization can significantly reduce download sizes. GLTF and GLB formats offer smaller file sizes and faster parsing times. Compressing game resources and using efficient file formats can improve load times. Framerate optimization and resolution scaling are important for better performance. Managing draw calls and using batching techniques can optimize performance. Browser DevTools, such as Chrome and Firefox, are useful for debugging and profiling. Detecting device performance and optimizing based on specific devices can improve game performance. Apple is making progress with WebGPU implementation. HTML5 games can be shipped to the App Store using Cordova.
Construyendo Experimentos Divertidos con WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Construyendo Experimentos Divertidos con WebXR & Babylon.js
Top Content
This Talk explores the use of Babylon.js and WebXR to create immersive VR and AR experiences on the web. It showcases various demos, including transforming a 2D game into a 3D and VR experience, VR music composition, AR demos, and exploring a virtual museum. The speaker emphasizes the potential of web development in the metaverse and mentions the use of WebXR in Microsoft products. The limitations of WebXR on Safari iOS are discussed, along with the simplicity and features of Babylon.js. Contact information is provided for further inquiries.
Haciendo Juegos Increíbles con LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Haciendo Juegos Increíbles con LittleJS
Top Content
Little.js is a super lightweight and fast JavaScript game engine that has everything included to start making games right away. It has a tiny footprint and no dependencies, making it perfect for size-coding competitions like JS13K. Little.js is built with an object-oriented structure and comes with several classes. It provides a fast rendering system, a comprehensive audio system, and various starter projects for different game types. Little.js is designed to be simple and easy to understand, allowing you to look at and modify the code.
¡Mejora el rendimiento de tus juegos WebGL Unity!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
¡Mejora el rendimiento de tus juegos WebGL Unity!
The Talk discusses ways to boost the performance of WebGL Unity games, including issues with bundle size, memory usage, and runtime performance. It suggests using Brotli for compression and non-exception support for better performance. Choosing the appropriate texture compression format and experimenting with separate builds can also help. The Talk also covers optimizing textures, models, audio, and assets by reducing build size, using compression, disabling unnecessary models, and optimizing audio quality. Unity's optimization tools and profilers are recommended for analyzing performance and memory issues.
Cómo no construir un videojuego
React Summit 2023React Summit 2023
32 min
Cómo no construir un videojuego
The Talk showcases the development of a video game called Athena Crisis using web technologies like JavaScript, React, and CSS. The game is built from scratch and includes features like multiple game states, AI opponents, and map editing. It demonstrates the benefits of using CSS for game development, such as instant load times and smooth transitions. The Talk also discusses optimizing performance, supporting dark mode, and publishing the game to other platforms.
Abrazando WebGPU y WebXR con Three.js
JSNation 2024JSNation 2024
27 min
Abrazando WebGPU y WebXR con Three.js
The 3JS project has evolved into a community-driven effort with numerous contributors over the past 14 years. It started with 3D engine work in Flash and transitioned to using SVGs for rendering in HTML5 before adopting WebGL. The project showcases various projects and frameworks, including a no-code tool powered by 3.js. The team is working on a new render using WebGPU and developing a new shader language called TSL. The hope is that WebGPU will eventually replace WebGL, offering better control and performance.

Workshops on related topic

Crea un Juego Con PlayCanvas en 2 Horas
JSNation 2023JSNation 2023
116 min
Crea un Juego Con PlayCanvas en 2 Horas
Top Content
Featured WorkshopFree
Steven Yau
Steven Yau
En esta masterclass, construiremos un juego utilizando el motor WebGL de PlayCanvas desde el principio hasta el final. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la escritura de scripts, la creación de UI y mucho más.
Tabla de contenido:- Introducción- Introducción a PlayCanvas- Lo que vamos a construir- Agregando un modelo de personaje y animación- Haciendo que el personaje se mueva con scripts- 'Falsa' carrera- Agregando obstáculos- Detectando colisiones- Agregando un contador de puntuación- Fin del juego y reinicio- ¡Resumen!- Preguntas
Nivel de la masterclassSe recomienda familiaridad con los motores de juegos y los aspectos del desarrollo de juegos, pero no es obligatorio.
PlayCanvas de principio a fin: la versión rápida
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas de principio a fin: la versión rápida
Top Content
WorkshopFree
João Ruschel
João Ruschel
En esta masterclass, construiremos un juego completo utilizando el motor PlayCanvas mientras aprendemos las mejores prácticas para la gestión de proyectos. Desde el desarrollo hasta la publicación, cubriremos las características más cruciales como la gestión de activos, scripting, audio, depuración, y mucho más.
Introducción a WebXR con Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introducción a WebXR con Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
En este masterclass, te presentaremos los conceptos básicos de la construcción de experiencias de Realidad Mixta con WebXR y Babylon.js.
Aprenderás lo siguiente:- Cómo agregar objetos de malla 3D y botones a una escena- Cómo utilizar texturas procedurales- Cómo agregar acciones a objetos- Cómo aprovechar la experiencia predeterminada de Realidad Cruzada (XR)- Cómo agregar física a una escena
Para el primer proyecto en este masterclass, crearás una experiencia interactiva de Realidad Mixta que mostrará estadísticas de jugadores de baloncesto a fanáticos y entrenadores. Para el segundo proyecto en este masterclass, crearás una aplicación WebXR activada por voz utilizando Babylon.js y Azure Speech-to-Text. Luego, desplegarás la aplicación web utilizando el alojamiento de sitios web estáticos proporcionado por Azure Blob Storage.
Masterclass de Codificación en Vivo de Juegos Pequeños
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Masterclass de Codificación en Vivo de Juegos Pequeños
Workshop
Frank Force
Frank Force
Sumérgete en el cautivador mundo del desarrollo de microjuegos con Frank Force en este interactivo masterclass de codificación en vivo. Diseñado tanto para desarrolladores experimentados como para curiosos principiantes, esta sesión explora los desafíos únicos y las alegrías de crear juegos y demos con restricciones extremas de tamaño.
Construyendo el Metaverso Interconectado y Traversable
JS GameDev Summit 2022JS GameDev Summit 2022
103 min
Construyendo el Metaverso Interconectado y Traversable
WorkshopFree
Avaer Kazmer
Avaer Kazmer
Basado en gran medida en Free Association en el Metaverso - Avaer @Exokit - M3, Avaer demostrará algunas de las formas en que los estándares abiertos permiten la travesía abierta y gratuita de usuarios y activos en todo el metaverso interconectado.