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.

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

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

Optimizing HTML5 Games: 10 Years of Learnings
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Optimizing HTML5 Games: 10 Years of Learnings
Top Content
The open source PlayCanvas game engine is built specifically for the browser, incorporating 10 years of learnings about optimization. In this talk, you will discover the secret sauce that enables PlayCanvas to generate games with lightning fast load times and rock solid frame rates.
Building Fun Experiments with WebXR & Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
Top Content
During this session, we’ll see a couple of demos of what you can do using WebXR, with Babylon.js. From VR audio experiments, to casual gaming in VR on an arcade machine up to more serious usage to create new ways of collaboration using either AR or VR, you should have a pretty good understanding of what you can do today.
Check the article as well to see the full content including code samples: article. 
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with LittleJS
LittleJS is a super lightweight game engine that is easy to use and powerfully fast. The developer will talk about why he made it, what it does, and how you can use it to create your own games. The talk will include a demonstration of how to build a small game from scratch with LittleJS.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
In this talk we'll delve into the art of creating something meaningful and fulfilling. Through the lens of my own journey of rediscovering my passion for coding and building a video game from the ground up with JavaScript and React, we will explore the trade-offs between easy solutions and fast performance. You will gain valuable insights into rapid prototyping, test infrastructure, and a range of CSS tricks that can be applied to both game development and your day-to-day work.
Boost the Performance of Your WebGL Unity Games!
JS GameDev Summit 2023JS GameDev Summit 2023
7 min
Boost the Performance of Your WebGL Unity Games!
Unity, when deployed on the web, faces three critical challenges: build size, memory usage, and overall performance. This lecture delves deep into advanced optimization techniques to help you address each of these issues. Attendees will gain insights into:
- Effective strategies for optimizing textures, audio, and models.- A detailed analysis of our ASTC experimentation with Unity, shedding light on the unexpected results despite Unity's claims.- A comprehensive guide to Unity's memory profiling tool and its implications.- An exploration of lesser-known Unity settings that remain underutilized by many developers.
Additionally, we'll introduce our proprietary tool designed specifically for Unity optimization. We will also showcase CrazyGames' developer dashboard, our platform that enables developers to monitor and enhance the performance of their web-based games seamlessly. 
Join us to equip yourself with the latest strategies and tools to elevate your Unity web gaming projects.

Workshops on related topic

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
Steven Yau
Steven Yau
In this workshop, we’ll build a game using the PlayCanvas WebGL engine from start to finish. From development to publishing, we’ll cover the most crucial features such as scripting, UI creation and much more.
Table of the content:- Introduction- Intro to PlayCanvas- What we will be building- Adding a character model and animation- Making the character move with scripts- 'Fake' running- Adding obstacles- Detecting collisions- Adding a score counter- Game over and restarting- Wrap up!- Questions
Workshop levelFamiliarity with game engines and game development aspects is recommended, but not required.
PlayCanvas End-to-End : the quick version
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
Top Content
WorkshopFree
João Ruschel
João Ruschel
In this workshop, we’ll build a complete game using the PlayCanvas engine while learning the best practices for project management. From development to publishing, we’ll cover the most crucial features such as asset management, scripting, audio, debugging, and much more.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.