Game Development with Threejs

Rate this content
Bookmark

Let's talk about threejs, react three fiber and how to start developing games using 3d libraries and physics engines.

Anderson Mancini
Anderson Mancini
22 min
28 Sep, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Hi there! I'm Anderson Mancini, a creative developer from Brazil. Let's dive into 3JS game development and how you can start your journey. React ThreeFiber offers a more organized and compact approach to building scenes using components. Explore exciting examples of what you can build with React ThreeFiber and 3JS. Learn the creative process of building a game using 3JS and recommended courses and learning resources. Performance tips for creating games with 3JS will be discussed in tomorrow's session.

Available in Español: Desarrollo de juegos con Threejs

1. Introduction to 3JS Game Development

Short description:

Hi there! I'm Anderson Mancini, a creative developer from Brazil. Let's dive into 3JS game development and how you can start your journey. I combined my 3D modeling skills with my gaming experience and discovered 3GS. It's an open-source JavaScript library that creates 3D interactive experiences on any browser. It abstracts the complexity of WebGL and allows you to extend its functionalities.

Hi there, my name is Anderson Mancini, and thanks for joining me at the JS Game Dev Summit. We will talk about 3JS game development and how you can start your journey learning it. So let's dive right in.

By the way, I'm a 43 years old creative developer from Brazil, and I'm founder and CTO of Neltix, a company that is based in Brazil, of course, as a creative studio, and I work with companies seeking ways to increase engagement through digital interactions, and I would say that's why game is usually part of my daily routine at my work. And I want to talk to you about how did I ended up knowing about 3js anyway. I usually say that I'm a developer trapped in a designer body, like I have worked with UI and UX designer since I was 18, but my real passion was always 3D modeling. I love this stuff. And I was seeking a way how could I combine my 3D knowledge modeling skills that I gained over years with my gaming experience. And about four years ago, I decided to bring my 3D modeling knowledge to the web somehow. And I feel that most websites in my country especially, they lost their appeal after a macro media flash became obsolete. And macro media flash was the one thing that I was using when I was creating my stuff before starting in this journey. And then I became aware of 3GS. So it was incredibly hard to find someone to hire for my company at that time. And then I decided to learn it myself, to give it a try. And what started as this learning endeavor very quickly became this passionate obsession. And that's why I'm so excited to be here, to give you some tips on your journey, try to teach you how to improve your way of learning 3GS, and to show you that learning this can be both accessible and very rewarding.

So let's talk about what is 3GS anyway. So 3GS is an open-source JavaScript library. It is used to create 3D interactive experiences on your browser. And it was created by Ricardo Cabelo in 2010. And now it is maintained by hundreds of developers all over the world. I would say me included somehow. And it abstracts the complexity of WebGL, which is like a very complex way of creating 3D for the web. But basically that means that we can run GPU-accelerated apps without running or installing anything extra on your computer, meaning no extra plugins are needed. And it is cross-platform, meaning that your work can run on any browser. And I would say more than browsers. Any modern browser can support 3GS. And we can extend it by using physics libraries, animation libraries, and many more stuff. So you can add functionalities to this application, to this library. And let's see how it looks on code.

2. Rendering a Rotating Cube with React ThreeFiber

Short description:

So I can show you a simple example of how to render a rotating cube on your screen. React ThreeFiber is a React renderer for Three.js, created by Paul Hanschell in 2019. It offers a more organized and compact approach to building scenes using components. With an extensive ecosystem and helpful resources from other developers, React ThreeFiber allows for better understanding and usage of the library.

So I can show you a simple example, very simple example, how it looks on code. This is a simple example. I know it is not exciting at all to have a rotating cube on your screen, but I want to show you how small code that you need to render a rotating cube on your screen. And everything that is written there, it is basically trying to mimic something that happens in our real life. So if it was in real life, that will be like a studio or like a movie recording studio.

So to start, you need your scene. So you need to have a place to record your movie. Then you need like a camera to record things. Then you need a renderer so you can see what is being recorded by that camera and then you have actors or objects that will be recording. And this is exactly what is happening in those lines. So it is very straightforward to understand using this comparison.

And I also want to talk about React 3 Fiber. So React 3 Fiber, it is more suitable to you probably if you are more familiar with React framework and we will see why. React 3 Fiber of course is a React renderer for Three.js. It was created by Paul Hanschell in 2019 and now it is maintained by hundreds of developers for point members community. And you can build your scenes using components to keep everything more readable and more organized. We will see an example in a few minutes. So your components can be reused. It has an extremely extensive ecosystem with a lot of new things being released like every week, I would say. And we have a lot of helpers created by other developers that are available for free for us to use. And we can see like an example on code. This is the exact same, not exciting at all rotation queue but now we are using React Tree Fiber. And as you can see, it is much more organized and compact because it is using components to structure everything. So of course, where the main, the MyBox component it is using a composition. So everything that is needed for that specific component is compacted or packed in this component isolated thing. And then you can import that on your canvas and you have the same scene. And here's an example of a comparison between FreeJS which is already short and React ThreeFiber. So of course it is simpler because he is using components but what is happening here, it is like basically the same code. Everything is just organized in a different way so you can get better understanding and better usage of the library. And I'm not trying to convince you to use React ThreeFiber or React, I'm just saying the benefits of using compositions on your work.

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.