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.

22 min
28 Sep, 2023

AI Generated Video Summary

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.

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.

3. Components and Dray in React ThreeFiber

Short description:

Components in React ThreeFiber are easy to reuse and can be duplicated to create multiple rotating cubes. You can also pass props to change component properties from outside. Dray offers a collection of components like orbit controls and clouds that can be easily imported and added to your project. With over 150 helpers, Dray provides a wide range of functionalities for your scenes.

And what is another beauty about components because they are easy to reuse. So if you want another cube on your screen, all that you have to do is just to duplicate that line and then you have another rotating cube. And of course you can pass props. So you can change properties from the inside component from outside, which is great to keep everything organized.

And of course, as I talked to you, we have components from Dray. Dray is a collection of growing components like N helpers that you can import into your scene and it is free to use. So if you want to have orbit controls, like I have in this example, we can rotate around now in that scene. All that we have to do is to import orbit controls from Dray library and it is that simple. And if you want, for example, to have clouds on your project or your game, you don't need to code it like someone already did it for you. You just import the cloud component also from Dray and then you add to your canvas. And it is simple as that. And Dray has more than 150 other helpers like this for you to use. So the secret is to know them by visiting the React TreeFiber documentation.

4. Exciting Examples of React TreeFiber and FreeJS

Short description:

Let's explore some exciting examples of what you can build with React TreeFiber and FreeJS. From journey visualizations to product configurators, these projects showcase the power of FreeJS. You can visit my website or freejs.org for more examples and inspiration. Additionally, I'll share examples of stunning games created using FreeJS, such as Elysium by Blizzard and Choo Choo World by Ellusion. Don't miss the opportunity to check out these impressive games and explore the world of creative development.

And let's see now some more exciting examples how you can use React TreeFiber and FreeJS and what can you build with this library. So let's see. Those are some examples of my recent projects. And as you can see, we have like the journey visualization. We have product configurators like the GSI Games Sim Industries with that beautiful wheel controller for like car simulation. It is amazing to see things like that running on your browser without installing any plugin at all.

And those are other two examples like one for Dairy Farmers of Canada from Neltic's recent project and Immersive Studios Automotive Showroom. And those are all powered by FreeJS. And again, they run with a great performance without installing anything extra on your browser. You can visit those addresses, those links just by searching on them on Google, if you want. And if you want to see more examples like this you can visit my website under salmansinha.dev or freejs.org which is amazing for getting examples. They have a lot of showcases on their home page. So you definitely should take a look at that.

And of course, we are here to talk about games, not projects. And yes, you can create games using FreeJS. And let's see some examples of games created using this library. Here we have two amazing examples from Mercy and Mitchell. And they are so beautiful that it's hard to believe they run on your browser and you don't need to install anything extra. So they are really, really good. And here are some more examples. We have the Elysium by Blizzard, which was released, I guess, last month. And then we also have Choo Choo World by Ellusion. Those are also great examples. Some of them are also multiplayer. So you should definitely take a look at those links and see by yourself how they work and how beautiful they are. They really look like an application, not a website. And for more games like this, you should also check this website, WebGamer.io, which has a lot of other examples of games using 3Ds. And I want to take this opportunity to talk to you about creative development, not only the game development. So I'm creating this game with my friend Leandro Castanho from Argentina. And this will be released soon.

5. Creative Process and Learning Path

Short description:

Let's explore the creative process of building a game using FreeJS. We gather references, define a style, and use AI to generate potential designs. Then, we collect or create assets, develop a visual concept, and create the final board layout. While 3JS is not a game engine, it can be enhanced with additional features. For webGL game development, consider PlayCanvas and Babylon. To start learning 3JS, you'll need HTML, CSS, and JavaScript knowledge.

So I want to show you a little bit of the creative process. So we start by gathering a lot of references and trying to define a style for a game. Of course, we had this idea to build a pinball machine game using FreeJS. And we used, in this case, artificial intelligence to grab references and potential designs on the game.

Then we start by collecting assets or creating new assets for our game to create the board and the overall mood we want for that specific game. And then we create a visual concept, which is, of course, experiment evolves, experimenting with life, with the visuals of it, and the overall guideline for the game. And then finally, we create the board, like the final layout for the pinball machine. And this is a gameplay prototype. It is just to test the physics and the overall interface. It is, of course, currently under development, so be sure to follow us on Twitter or YouTube so you can follow the progress on this game that we are creating.

So the physics works, but nothing else for now. But this is a little bit of the creative process of creating a game. And so you ask, is 3JS a game engine? No. It is kind of. The short answer, it is no, because it is a generic 3D renderer. So things like physics, like animations, you need to do yourself. But as I showed you, we have a lot of things that you can add as an extra to the 3JS to transform it in a game engine. And if you want to really dive in into the game development using your browser, you should also know about PlayCanvas and Babylon. They are more focused webGL game development. I will not go over them here, because it is another course, let's say. But you should definitely check them out.

And I want to share with you a little bit of my learning path. So let's see how we can start learning 3JS. This is my path. I want to tell you that it works for me. I followed this when I was learning it. But your path might be different. So use it with caution, OK? We can start by mentioning that you need to have HTML and CSS knowledge to start with this. This is a mandatory thing. And also JavaScript knowledge, it is a requirement, because everything that we'll be creating will be using JavaScript in the end.

6. Recommended Courses and Learning Paths

Short description:

I recommend taking the Learn JavaScript Free Camp course on YouTube to learn the basics of JavaScript. If you want to use React TreeFiber, the Joy of React course by Josh is a great option. After learning JavaScript, it's important to learn a 3D software like Blender 3D. You can also explore Spline, a 3D software that supports native 3JS and React 3 Fiber export. After learning the basics, you can choose between free or paid resources to continue your learning journey.

So I recommend this course. This course can teach you all the basics of JavaScript. If you never saw JavaScript before, you just search for Learn JavaScript Free Camp on YouTube. It is a great course.

And if you want to use React TreeFiber, of course, React knowledge is a requirement. And I recommend you to search for Joy of React course by Josh. It is a paid course, but it has hours and hours of videos and exercises. And it is beginner friendly, so if you never saw React before, don't worry. You'll be covered. And it is another great course.

And then, after learning the basics of JavaScript, I recommend you to learn 3D software. And why? Because creating a 3D game in a 3D library without having prior knowledge of a 3D software will be very challenging. So I encourage you to learn the basics of any 3D software you want, just to have an interface to play with when you want. And I recommend the Blender 3D, of course, because it is free. And it is the one that I've been using all over the years. It is very popular, so you can find a lot of free courses and a lot of free content on internet. And you can start with this tutorial by Blender Google, and this will teach you all the basics that you need. And you can also learn Spline these days. So Spline is a 3D software used to create 3D interactive experiences in your browser. So it supports native 3JS and React 3 Fiber export. And just to mention, this entire 3D software were created using 3JS or based on 3JS. So you can see the power of it. It is pretty crazy, isn't it? So it all runs on your browser. You don't need to install anything. So you should definitely take like a look at this, at least. And after learning the basics of the 3D software, what I recommend is you to follow two possible paths. So you want to learn using free resources. Would require more discipline and patience from your side. Or you can learn by using paid resources to speed up things for you in a more structured way, let's say. And let's start by the free resources.

7. Learning Resources and Game Development

Short description:

If you want to learn 3JS, there are various resources available. You can start with the 3JS documentation, a Discover 3JS book, or beginner tutorials on YouTube. For a comprehensive course, the 3JS Journey by Bruno Simon is highly recommended. Once you have a solid foundation, you can explore specific game development courses like Nick Lever's paid course on Udemy or Baba Sensei's free course on YouTube. Additionally, you can expand your knowledge by learning 3D modeling, GLSL shaders, animation libraries, and visual effects. However, performance can be a challenge when creating games with 3JS.

If you just type like 3JS, learn 3JS, 3JS tutorials on YouTube or any platform, you will find a lot of great things to learn from. I would start with the 3JS documentation because there's a lot of things covered there. So it is a great place to start. If you like books, this Discover 3JS book can cover all the basics that you need. And if you are like me and prefer videos, there are tons of videos teaching the basics of the 3JS. And you have a great free course. Just search for this 3JS tutorial for absolute beginners, and you will be covered.

And of course, if you want to pay resource, like if you can afford it, the most complete course for sure is 3JS Journey by Bruno Simon. Like, it is everything that you need in one place. It has more than 72 hours of video, and you can go from the absolute beginner to advanced. And this is the way that I ended up using to learn 3JS. I would say that everything that I know came from this course, so it is amazing to be honest. So, you should definitely take a look at this.

And moving forward, after you have the basics of 3JS knowledge, then you can study more specific game development courses. And we have a lot of them as well, because 3JS, it is in the field for quite some time, more than 10 years. So a lot of other developers, more experienced than us, can teach us. So, you have, for example, Nick Lever course, 3JS game development is very specific. It is a paid on Udemy, and you also have Baba Sensei course, just released free on YouTube, which is great. So, they are very great ways for you to start game development. And remember to start with the easy ones and not the most difficult games, so you cannot get frustrated with yourself.

And after creating your first basic game, you can expand your knowledge, and you can do so by learning for example, more about 3D modeling, because that will enable you to customize your 3D assets or to create your 3D assets. And you can also learn GLSL shader language, which is create, which is, I'm sorry, you need to cut this part as well. You can also learn GSGL, oh, this one is difficult to say. I'll do again. You can learn GLSL shaders to create unique materials, unique like shaders, unique post-processing effects. It is amazing. You can also learn an animation library like GSA, React Spring or Firmware Motion to help you with animations on your projects. And depending on your game requirements, you can also learn visual effects, post-processing particle systems, and much more. So, of course we have disadvantage like anything. Like the biggest issue when we create games using 3JS, it is the performance.

8. Performance Tips and Final Remarks

Short description:

Complex scenes in 3JS can cause a drop in frame rate, but browsers are improving. Tips on performance will be discussed in tomorrow's session. Start with the basics and create simple games to gain experience. Thank you for your time and don't forget to follow me on Twitter and YouTube for more tips and inspiration. Have a great day!

And I would say any web platform, but 3JS runs on your browser, so complex scenes can drop the frame rate. But like the browsers are gradually improving on this. So we'll be covered probably in some timeframe ahead.

And will be very hard for me to give you tips on performance because we have limited time here, but we will have a discussion tomorrow. And there I can have more times to share with you some techniques we can do to improve the performance. So be sure to visit us tomorrow for those tips.

And one last thing that I want to say, it is like, don't try to learn all at once because it is hard. Like of course you need time and start with the basics, create very basic games at the beginning. And this will give you the experience that you need to move forward. So be patient with yourself.

And I want to thank you very much for your time. Like I hope you enjoyed as much as I did. And I hope that my knowledge was helpful to you. And don't forget to follow me on Twitter and on YouTube so you can get more tips and inspiration. And I hope to see you soon. I wish you a great day and bye-bye.

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

JS GameDev Summit 2022JS GameDev Summit 2022
33 min
Building Fun Experiments with WebXR & Babylon.js
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. 
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.

Workshops on related topic

JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Featured WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
121 min
PlayCanvas End-to-End : the quick version
WorkshopFree
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.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
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.