SPACE
to play / pauseARROW RIGHT
orL
to go forwardARROW LEFT
orJ
to go backwardARROW UP
to increase volumeARROW DOWN
to decrease volumeF
to toggle fullscreenM
to toggle mute0 to 9
to go to the corresponding part of the videoSHIFT
+,
to decrease playback speedSHIFT
+.
or;
to increase playback speed
- Bruno Simon's portfolio
- Visual Studio Code
- Blender
- CodeSandbox
- @bruno_simon (Twitter)
- Quizzes
- Certificate example
Projects
- https://bruno-simon.com
- https://threejs-journey.com
- https://www.fromscout.com
- https://orano.imm-g-prod.com/experience/innovation/en (original website isn’t live anymore)
- https://prior.co.jp/discover/en
- https://madbox.io
- https://chartogne-taillet.com/en
Experiments
Shortcuts ⌨️
Unlock content 🔓
To get access to 93 hours of video, a members-only Discord server, subtitles, lesson resources, future updates and much more join us for only $95!
Want to learn more? 🤘
That's the end of the free part 😔
To get access to 93 hours of video, a members-only Discord server and future updates, join us for only $95!
Introduction
Difficulty Easy
Introduction 00:00
Hello, and welcome. This lesson isn't truly a lesson. It's more of a presentation to introduce myself and present what's coming on your journey.
The main reason for this lengthy introduction, is the fact that this course is quite comprehensive and that you need to be well-prepared.
Not yet a student? 00:18
Some of the lessons (like this one) are free and the beginning of most lessons is also available for free. I did this so that you can catch a glimpse of the course and what’s in it.
If you’ve already registered to Three.js Journey, ignore this message, because you have access to every lesson. But if you aren’t a Three.js Journey student yet, please have a look. See for yourself and, if you like the content, join us.
Now let me introduce myself.
Who am I? 00:41
My name is Bruno Simon. I'm a French creative developer, as you can probably hear in the video.
Right now, I'm a freelance developer and work with clients from around the world. 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 Master's 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 (https://bruno-simon.com). 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.
Here is a selection of client projects I worked on:
- https://bruno-simon.com
- https://threejs-journey.com
- https://www.fromscout.com
- https://orano.imm-g-prod.com/experience/innovation/en (original website isn’t live anymore)
- https://prior.co.jp/discover/en
- https://madbox.io
- https://chartogne-taillet.com/en
And some experiments I did just for fun:
- https://my-room-in-3d.vercel.app
- https://organic-sphere.vercel.app
- https://experiment-holographic-terrain.vercel.app
- https://experiment-woodkid-volcano-robot.vercel.app
- https://infinite-world.vercel.app/
- https://awwwards-2022-workshop.vercel.app
Why this course? 09:15
When I started learning Three.js, I 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 and the library is stable, even though it's still evolving thanks to the community. Yet, an ultimate course that takes you by the hand was 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 launched my portfolio, many people asked me if I could tutor them or where to learn the techniques I use. I had in-depth knowledge of Three.js and I knew how to teach. When I got all those requests, I figured it was time to build that online course for everyone to explore.
What will you learn? 10:54
Three.js is vast, and you can do an infinite number of things with it. That explains why the course is so long.
The content is separated into chapters and is intended for absolute beginners. If you know nothing about WebGL and Three.js but want to create cool 3D websites, you’ve come to the right place.
Some of you might be tempted to jump straight to specific chapters. Yes, I’m talking to you, you React developer! If you are in a hurry or just eager to learn advanced topics, be my guest and try. Still, my recommendation is to learn the lessons one by one in order. Anyway, if it’s too hard, you can still go back to a previous chapter.
As I’ve mentioned earlier, the course is separated into chapters. Let’s talk a little about each one in order to help you apprehend what’s coming.
In the first chapter, we will learn all the basics, such as creating a first scene, rendering it, adding objects, choosing the right materials, adding textures, animating everything and even put it online. Some might find this part a bit boring since we enumerate a lot of elements. Don’t worry, the fun and creative parts are coming.
In the next chapter, we will go through many classic techniques: for instance, creating our own geometries, adding lights and shadows, interacting with 3D objects, and adding particles. That’s where things get a little more exciting.
In the third chapter, we will learn more advanced techniques and even stray away from WebGL and Three.js, by learning how to create our own 3D models using Blender. That's right! You'll also learn how to use Blender during this course. You’ll also learn how to add physics using the library I used for my portfolio. And I’ll even teach you how I personally organise my code for big projects.
In the fourth chapter, we are going to talk about shaders. If you’ve already heard about shaders, you probably know this is where people start to struggle, and for good reason. Shaders are hard, but shaders will unlock the true power of WebGL. You’ll be able to create things that would seem impossible at first. If you don’t understand what I’m talking about, don’t worry, everything will make sense once you finish this chapter.
In the fifth chapter, we will go the extra mile with even more advanced techniques, such as post-processing, performance optimisation, and how to mix WebGL with HTML.
In the sixth chapter, we will learn how to create a scene like the one you see on the homepage of Three.js Journey. It’s not going to be the same scene because the chapter would have been way longer and boring, but the techniques are exactly the same and you’ll be able to create any kind of scene after that.
And finally, in the seventh chapter, we will learn how to use Three.js in a React application with React Three Fiber. I know many of you are excited about this and I’m sure you’ll love this part. The number of techniques you’ll learn and practice is huge. You’ll even create a game with physics, real game mechanics, UI, and cool effects. Oh and, if you don’t know React, don’t worry, I’ve got you covered. There is a 4-hour long lesson dedicated to learning React basics. That’s a bonus. You came to learn Three.js and you’ll learn a bunch of other things along the way.
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.
Updates 17:17
As a web developer, you probably already know how fast things are moving these days. Libraries come and go, updates are happening every day and it’s hard to keep up.
Don’t worry, I’m keeping Three.js Journey up to date. I’ve actually been doing that for a while. As I’m writing this lesson, Three.js Journey has been out for 2 years and during those 2 years, I kept updating the dependencies and the lessons. I’ve added 37 hours of video. Yes, that’s more than half of the current duration of the course. And I’ll keep adding content that students of Three.js Journey, will get access to without paying any extra.
How to study this course? 18:10
Difficulty
As you go through the lessons, you’ll see that things get harder. You will struggle, but don't worry, it's perfectly normal. No one can understand everything on the first try.
The first thing to understand is that, if it’s hard to learn, it’s valuable knowledge (or a bad teacher), so keep up.
Secondly, yes we approach challenging topics, but then we practice. After tackling challenging topics multiple times, it’ll start to make sense.
Find out how you can learn the best
Each individual has a unique way to learn. It's a valuable lesson for you to find out how you can get the most out of this course.
Find the moment of the day where you learn best. For me, it’s in the morning. 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 distractions.
Some people like to first focus on the lesson without doing anything else and then try to do the exercise themselves while going back to the lesson with which they struggle.
Some people just like to follow along and wait for the end of the lesson to then venture on their own by going the extra mile on the topic.
Of course, you don't need to finish the whole course 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.
The videos
If you are watching the video right now, you’ll notice that the player has some handy features.
As an example, you can change the speed of the video if you feel like it’s going too fast or too slow.
You also have access to a bunch of shortcuts. You can see the various sections. You can go fullscreen. The video stays visible when you scroll down. Etc.
Use those features as you please.
Lessons
You might have noticed that lessons are available both as video and text. Text versions are almost the same and you get access to screenshots, video previews, code with syntax highlights, etc. Use the version you prefer.
During each lesson, 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 into any of the topics we cover.
Exercises
Learning is a matter of practicing which is why a starter file is provided with almost every lessons.
The final version of the exercise is also provided in case you want to check the result directly.
More about what’s in those zip files and how to use them soon.
Code
Each developer has a personal way of coding and I have mine. During the lesson, the code will follow my personal preferences. Do as you wish. If you want to refactor all the code, go ahead. You can even use a code beautifier that will automatically reformat your code.
Prerequisite 23:38
You need a computer on which you can install software and code. 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.
This course is beginner-friendly, yet you do need to know JavaScript basics like variables, array, objects, loops, functions, and events.
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. However, you can 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. Please don’t use Safari or Edge. They do the trick when it comes to navigating, but not when it comes to debugging. At some point, we will install Chrome extensions, but those extensions are optional. Also, be careful with browsers that implement special security and privacy features like Brave. They might interfere with your code.
We will also learn how to use Blender. It's a piece of 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 create cool WebGL 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? 26:55
If you get stuck for whatever reason, don't worry, you're not alone.
Join the Discord
As a Three.js Journey student, you get access to a members-only Discord Server. Simply click on the Discord button at the top right corner of this page and join the Private server.
There are currently thousands of members there including myself, and we will do our best to help you. In return, if you feel like helping others, that would be awesome and I would appreciate it a lot.
By the way, the link to join the Private Discord will work only once, so make sure you join with the right account (I know some of you have a bunch of Discord accounts for some reason).
If you need to join the server later, you don’t need to go through the Three.js Journey website again. The link won’t work. Just open your Discord application and the Three.js Journey Discord server will be there on the left:
Post your issue
As for posting your issue, there is one channel per lesson. Please use the appropriate one, and if your question is not related to a lesson (like if it’s for a personal project), use the #general-questions channel.
Be brief and concise.
If you have screenshots or videos, that’s even better, but most of the time, you’ll need to share some code. In Discord, you can use triple-back quotes (it’s like a quote but a tilted back) to send the code.
Here’s an example:
```js
const hello = 'there'
```
Adding the language (js
in this case) will add syntax highlight. This will greatly help us on helping you out.
Post your work 31:12
You are here to learn how to create 3D websites, right?
You don’t have to finish the whole course to create nice projects. After a few lessons, you’ll see that you’ll have sufficient knowledge to venture out on your own and have some fun.
But what is it worth if you can’t share it with the world? Well, good news, in the Go Live lesson, you’ll learn how to put your projects online for free.
As for getting some attention, personally, I like using Twitter. That’s why I’ve created a #threejsJourney hashtag. Use it or tag me (@bruno_simon) so that I can see what you do. If I like it, I’ll retweet it and give you some extra visibility.
You can also post on the Discord server which is ideal if you want some feedback. Go on the Three.js Journey Discord server and post on the #students-work channel.
Certificate 33:24
Finally, there is a certificate of completion for this course.
But don’t think I’ll just offer it to you just for watching all the videos. You’ll have to answer a quiz for each lesson. You can access the quiz from the lesson page (button right below the player) or from the pop-in that opens at the end of the lesson.
All quizzes are also accessible from your account page.
You need to have registered to Three.js Journey in order to see the quizzes.
If you answer incorrectly, you’ll have to wait a few minutes before trying again. Enough time for you to go gather the information in order to answer successfully.
The final certificate looks something like this https://threejs-journey.com/certificate/view/17
You can share it and even print it.
Conclusion 35:15
It was quite a long introduction, but I wanted to make sure you start on a good foot.
Now is the time to learn Three.js.
How to use it 🤔
- Download the
- Unzip it
- Open your terminal and go to the unzip folder
-
Run
npm install
to install dependencies
(if your terminal warns you about vulnerabilities, ignore it) -
Run
npm run dev
to launch the local server
(project should open on your default browser automatically) - Start coding
- The JS is located in src/script.js
- The HTML is located in src/index.html
- The CSS is located in src/style.css