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.

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

FAQ

3JS is an open-source JavaScript library created by Ricardo Cabelo in 2010, used to create 3D interactive experiences directly in web browsers. It simplifies the complexity of WebGL, allowing GPU-accelerated applications to run without extra plugins across various platforms.

Anderson Mancini is a 43-year-old creative developer from Brazil, founder and CTO of Neltix, a creative studio. He specializes in increasing engagement through digital interactions, often incorporating games into his projects.

Anderson began using 3JS about four years ago as a way to bring his 3D modeling skills to the web, especially after the obsolescence of Macromedia Flash, which he previously used for creating digital content.

React 3 Fiber is a React renderer for Three.js, which allows developers to create 3D scenes using React components. Created by Paul Henschel in 2019, it helps organize and manage 3D scenes more effectively, making the codebase more readable and maintainable.

Beginners can start with the 'Learn JavaScript Free Camp' on YouTube to grasp JavaScript fundamentals and the 'Discover 3JS' book for an in-depth understanding of 3JS. For structured learning, the '3JS Journey' course by Bruno Simon is highly recommended, covering beginner to advanced topics.

Yes, 3JS can be used to develop games that run directly in web browsers without additional installations. It's not specifically a game engine but can be extended with libraries for physics and animations to build interactive games.

Examples include visualization tools, product configurators like the GSI Games Sim Industries, and various immersive experiences created by companies like Dairy Farmers of Canada and Immersive Studios Automotive Showroom.

Developers can enhance their 3JS projects by learning 3D modeling, using GLSL shaders for unique visual effects, and incorporating animation libraries like GSAP or React Spring. It's also beneficial to understand particle systems and post-processing for advanced visual effects.

The primary challenge of using 3JS for games is managing performance, as complex scenes can significantly drop frame rates in browsers. However, browsers are progressively improving in handling such graphics-intensive applications.

In 3JS projects, developers can utilize components to modularize and reuse code efficiently. For example, with React 3 Fiber, components like MyBox can be created to encapsulate specific functionalities and reused across different parts of the application or in various projects.

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
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.
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
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.
Making Awesome Games with LittleJS
JS GameDev Summit 2022JS GameDev Summit 2022
34 min
Making Awesome Games with 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.
How Not to Build a Video Game
React Summit 2023React Summit 2023
32 min
How Not to Build a Video Game
Watch video: How Not to Build a Video Game
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.
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!
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.
Embracing WebGPU and WebXR With Three.js
JSNation 2024JSNation 2024
27 min
Embracing WebGPU and WebXR With 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

Make a Game With PlayCanvas in 2 Hours
JSNation 2023JSNation 2023
116 min
Make a Game With PlayCanvas in 2 Hours
Top Content
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.
Tiny Game Live Coding Workshop
JS GameDev Summit 2023JS GameDev Summit 2023
115 min
Tiny Game Live Coding Workshop
Workshop
Frank Force
Frank Force
Dive into the captivating world of micro-game development with Frank Force in this interactive live coding workshop. Tailored for both seasoned developers and curious newcomers, this session explores the unique challenges and joys of creating games and demos with extreme size constraints.