What is three.js and how to start with it - JS GameDev Summit 2023
In this video, I talk about threejs, react three fiber, and how to start learning it.
Link: https://portal.gitnation.org/contents...
____________
Transcription:
I'm 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.
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 a better understanding and usage of the library.
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. Drei 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 various functionalities for your scenes.
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 Illusion. Don't miss the opportunity to check out these impressive games and explore the world of creative development.
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.
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 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.
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.
Complex scenes in 3JS can cause a drop in frame rate, but browsers are improving. Performance tips 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!