00:00/00:00
3:22
00:03:22

Shortcuts ⌨️

  • SPACE to play / pause
  • ARROW RIGHT or L to go forward
  • ARROW LEFT or J to go backward
  • ARROW UP to increase volume
  • ARROW DOWN to decrease volume
  • F to toggle fullscreen
  • M to toggle mute
  • 0 to 9 to go to the corresponding part of the video
  • SHIFT + , to decrease playback speed
  • SHIFT + . or ; to increase playback speed

⚠️ Update

In the latest versions of Three.js, the default setup makes our hamburger look good by default.

Some say that it’s even tastier. Unfortunately, it’s a digital hamburger and we can’t taste it.

Unlock content 🔓

To get access to 91 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? 👍

25%

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

Next lesson
23.

Custom models with Blender

Difficulty Hard

Introduction 00:00

Now that we know how to import a model into our scene, let's learn how to create our own model using a 3D software.

Choosing a software 00:10

There are many software like Cinema 4D, Maya, 3DS Max, Blender, ZBrush, Marmoset Toolbag, Substance Painter, etc. These are great, and they differ on divers criteria like the UX, the performance, the features, the compatibility, the price, etc.

In this lesson we are going to use Blender because it's free, the performances are remarkable, it works with all primary OS, it has many features, it has a vast community, and it became a lot easier since the 2.8 version.

Be aware that you won't be a Blender expert at the end of the lesson. It would take a full course to learn all its aspects, and there are already many great resources to learn. The idea is to understand the basics and de-mystify the software to have sufficient baggage to create simple models.

At the start we will discover all the basics. That will be a lot to take in but don't worry; we will repeat most of the shortcuts, the mechanics, and the features multiple times.

If you pressed a wrong shortcut at some point, you lost your scene, or the interface is completely messed up, just close and re-open Blender.

Downloading Blender 02:16

Go to the blender website download page and download the latest version: https://www.blender.org/download/

The software is pretty light, and it shouldn't take more than a few minutes.

Once downloaded, simply install it.

The lesson has been written and recorded with Blender 2.83.5. While there shouldn't be major differences, keep an eye on potential changes.

Interface 03:47

Splash screen

The splash screen gives you access to some useful links, templates, and recently opened files.

The image changes with the Blender version, so don't be surprised if you have a different one.

You can also see the exact version on the top right of it.

Click anywhere out of the splash screen to close it.

Areas

The different parts of the interface are called areas. Areas are very flexible, and you can create the layout that you want.

Default areas

By default, you have the main area called the 3D Viewport:

The Timeline to create animations:

The Outliner to see and manage the scene graph (or scene tree):

The Properties to manage the properties of the active object (selection) and the environment:

Change an area

To change what an area is displaying, click on the top-left button of that area. Here, we are going to change the Timeline area.

We are going to change the Timeline area for another 3D Viewport:

Resize an area

To resize an area, position your cursor between two areas and drag & drop:

Create new areas

To create a new area, first, we must decide what area we want to split. Then, we must position our cursor in one of the four corners of our area (a few pixels inside the area):

Finally, we drag and drop in the area we want to split:

Remove an area

Removing an area is a little tricky, and you might end up with dozens of unwanted areas. Don't worry, once you get the idea, it will be fine.

In a way, we don't remove an area; we un-split two areas. First, you must decide which one of the two areas is going to take over the other. If you want to remove the right area, start from the left area. Then place your cursor in one of the two corners adjacent to the area we want to remove (few pixels inside the area that is supposed to take over the other):

And then drag & drop (just like we did to create an area) but this time in the opposite direction (toward the area we want to remove):

It can take a few tries but you'll get it.

Shortcuts 12:37

One of the strengths of Blender is its shortcuts. There are tons of them, and once you master the basics, you can be very efficient. Don't worry; you can use all the shortcut actions through the interface or with the search panel that we will see later. Throughout this lesson, we will discover some of the more critical shortcuts.

Here's a non-exhaustive list of shortcuts: https://docs.google.com/document/d/1wZzJrEgNye2ZQqwe8oBh54AXwF5cYIe56EGFe2bb0QU/edit?usp=sharing

One important thing to understand is that shortcuts are hovered area sensitive. That means that the same shortcut can have different actions depending on what's behind our cursor. Most of the shortcuts we will see in this lesson concern the 3D Viewport. You should always make sure to keep your cursor above one of these areas when pressing the shortcut keys.

The shortcuts are also mode sensitive, but we will talk about modes later.

Only one or two shortcuts that we will see are different between Mac and Windows. If there is a difference, both versions will be cited. If the shortcut includes the CTRL key and you are using a Mac, do not assume it's CMD. Use the CTRL key instead.

Want to learn more?

That's the end of the free part 😔

To get access to 91 hours of video, a members-only Discord server and future updates, join us for only $95!

How to use it 🤔

  • Download the Starter pack or Final project
  • 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

If you get stuck and need help, join the members-only Discord server:

Discord