SPACEto play / pause
Lto go forward
Jto go backward
ARROW UPto increase volume
ARROW DOWNto decrease volume
Fto toggle fullscreen
Mto toggle mute
0 to 9to go to the corresponding part of the video
,to decrease playback speed
;to increase playback speed
Want to learn more?
Hello, and welcome. This lesson isn't truly a lesson. It's more of a presentation to introduce myself and present what's coming in this journey.
Who am I? 00:12
My name is Bruno Simon. I'm a French creative developer, as you can probably hear now. I'll do my best about that, and I hope you'll understand me. All the lessons are also available as text if you really can't follow some of my explanations.
Right now, I'm a freelance developer and work with clients from different countries. I used to be the lead developer for Immersive Garden, a french creative studio. And for many years, I've been a professor for multiple French post-grad and Masters degrees. I teach web development to beginners as well as WebGL with Three.js to more advanced students.
My favorite activity is, as you can guess, WebGL and particularly with Three.js. I've been using it for many years on various projects, and, in 2019, I launched my portfolio. I initially meant it to showcase some techniques for my students, but I enjoyed doing it, so I kept improving it, and people seemed to appreciate it. You can check it out at https://bruno-simon.com/
Why this course? 01:34
When I started learning Three.js, we didn't have many resources. The library was flourishing, but it was without a doubt new, and there appeared to be considerable gaps in the documentation. At that time, we had to push through and dig into the code and examples, find threads about frequent problems, and keep trying until it worked.
Nowadays, the documentation is excellent. We have pretty decent tutorials; the library is stable even though it's still evolving thanks to the community. Yet, an ultimate course that takes you by the hand is still missing. It would help if you had guidance to fully understand this subject and get enough experience to do your projects without struggling or getting lost.
After I've launched my portfolio, many people asked me if I could tutor them or where to learn those techniques I use. As a matter of fact, I've had the idea of creating a course for my students for a long time. When I got all those requests, I figured it was time to build that online course for everyone to explore.
What will you learn? 03:35
Three.js is vast, and you can do an infinite number of things with it. That explains why the course 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. That's right! You'll also learn how to use Blender during this course.
It's pretty neat to hatch stunning WebGL experiences, but if you need a high-end PC that can run AAA games at 140fps to enjoy it, it's not worth it. 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.
Because I'm a creative developer, I'll also do my best to help you create elegant experiences. I'll give you many tips and tricks to find the perfect tweaks for your WebGL creations.
How to apprehend this course? 08:11
Find out how you can learn best
Each individual has a unique way to learn. It's a valuable lesson for you to find how you can get the most out of this course.
My recommendation is to have the class running on a second screen from your working computer —or maybe a portion of your screen if this one is big enough. Always learn in the morning. That is the moment of the day when your brain is the most efficient. Do not try to rush things and complete the whole course in only one week. The brain needs time to process items, and it does it best at night. Maybe try one or two (three tops) lessons a day. Eat well, sleep enough, drink, and stay healthy. And don't forget to shut down any distraction.
Of course, you don't need to finish the whole class to start working on projects, whether personal or professional. If you feel like dropping out and want to start creating on your own, go ahead! The course will be there waiting for you if you need it.
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 will provide you with a starter zip file—except for the first one. I used Webpack for that starter. If you don't know Webpack, don't worry, there is a lesson dedicated to that.
You will also find a final zip file file per lesson. It's just like the starter zip file but it displays the finished assignment if you need it.
Each lesson is video recorded, 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.
During each class, we will go through various documentation pages, online tools, and examples. All the links will be available under the "🔗 Lesson's links" button at the bottom-right of each page. Go ahead and click on those when you want to dive deeper on any of the topics we cover
Each developer has their way to code and I have mine. During the lesson, in the starter zip file and the final zip file, the code will follow my preferences, but do as you wish. If you want to refactor all the code, go ahead.
Obviously, it would be best if you had a computer. Some course portions might vary depending on the OS, like the terminal commands or some Blender shortcuts. I'll always provide the macOS and Windows versions.
You will also need a code editor. I recommend Visual Studio Code because it's a well-oiled editor with a broad community and extended updates coming every month, but use the editor that suits you. There will be a few instances when we install plugins, but again, it won't be a big deal, and you'll probably find corresponding plugins for your code editor.
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.
We will also learn how to use Blender. It's a free 3D software that works on every primary OS, and it's just great. If you are curious, give it a try already.
You don't need to be good at maths. I'm terrible at it, and still, I manage to creates impressive experiences. Yes, being good at it would be a plus, but you can do without it, and I'll explain the formulas.
Finally, if you know nothing about Three.js, you're in the right place.
What to do if I'm stuck? 18:06
If you get stuck for whatever reason, don't worry, you're not alone.
You can join the Discord Server with the link that should be on the top of the page, and explain your issue. The community or I will help you as best as we can.
How to use it
(if your browser detects a menace, do not worry, it is not)
- Unzip it
- Open your terminal and go to the unzip folder
npm installcommand to install dependencies
npm run devto launch the local server
(your browser should start automatically)
You can now start coding.
- The JS is located in
- The HTML is located in
- The CSS is located in
Any trouble? Go to the discord server: