In this roadmap, you will find all the material required to master threejs including technologies, tools, roadmaps, objects and furthermore.

Clone the repository, install the dependencies and start the lessons with the base code.

git clone https://github.com/Chamepp/3D-Web-Roadmap.git
cd lesson
npm install
npm start

Three.js is vast, and you can do an infinite number of things with it. That explains why this repo lessons is so long. First, we will start by learning all the basics, such as creating our first scene, adding objects, choosing the right materials, adding textures, and animating everything. Then, we will go through many traditional skills: for instance, creating our own geometries, adding lights and shadows, interacting with the 3D objects, adding particles. Finally, we will end with more advanced techniques like physics, producing realistic renders, writing custom shaders, adding post-processing, and even creating our own Blender models. We will learn how to monitor the performances and apply different tips to make our WebGL experience work on as many devices as possible. Some things might seem challenging, and don't worry, it's perfectly normal. No one can understand everything on the first try. Each lesson focuses on one skill. These lessons will have you try said skill repeatedly in different situations until it feels comfortable enough.

Each lesson covers one subject, and it's better to follow them in order, but if you already feel comfortable with the basics, you can try to jump directly to more advanced techniques like the shaders. Each lesson in the roadmap will provide you with a starter code for the first one. You will also find it helpful to fork this repo, so you can edit it on your own github profile. Each lesson is based on basic expandable code, but remember, you also have access to a text version on the same page. The formated code involves syntax coloration, and every step of the way, you also have access to previews of the result you're supposed to achieve.

Each developer has their way to code and I have mine. During the lesson, in the starter code file the code will follow my preferences, but do as you wish. If you want to refactor all the code, go ahead.

This course is beginner-friendly, yet you need to know JavaScript basics like variables, loops, function, events, and, perhaps, modules. Don't worry about this last point; you'll figure out the module basics by following the next lessons. Another requirement is a modern browser with useful developer tools. I'll be using Chrome, but you can also use Firefox. I don't recommend other browsers because we need our tools to be robust and efficient. At some point, we will install a Chrome extension to help us monitor WebGL performances, but this part is optional. Finally, if you know nothing about Three.js, you're in the right place.

Have a look at contribution docs and discussions for how to update any of the roadmaps.

• Open pull request with improvements
  
• Discuss ideas in issues
  
• Spread the word
  
• Reach out with any feedback