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?
We created a scene that looks good when doing a render, but our final goal is to export it to Three.js.
We need to optimize it, but also to bake it. If you remember from the previous lesson, baking consists of saving the good-looking render result into a texture that we will then place on the geometry in Three.js. Because of that, we need to UV unwrap our scene.
You can start from the blender file you made in the previous lesson, or you can get the same file as is in that lesson by using the starter file.
Removing hidden faces
The first thing we need to do is remove all the hidden faces. That would mean faces directly on the floor like the bottom of the trunks. And, it would also mean faces against other faces like the back of the stair steps.
In order to see the faces more clearly, we can switch between the
Wireframe and the
We are going to start with the trunks.
You can deactivate the collections you are not working on at the moment by unchecking them in the
To optimize the trunks and logs:
- Select all of them.
- Go into
- Switch to the
- Select all the faces as shown below and delete them with
You should get something like this:
Repeat the process with the fences:
Repeat the process with the pole lights. You only need to do one of the pole lights because they are linked duplicates.
Don't forget to delete the bottom cap of the main beam and the caps of the rope:
Repeat the process with the rocks:
Though it isn't mandatory, if some rocks are overflowing into the ground, you can fix that with the
bissect tool we used in the previous lesson. Select all the faces in
Edit Mode, press
F3 and search for
bissect. Then slice the overflowing parts of the rocks you want to cut out.
For the portal, most of the optimization concerns the stairs.
You can start by resizing them so that they don't overlap too much:
Then you can remove the bottom faces but also the hidden faces between the steps:
If you did the previous lessons exactly as I said, and you now try to remove the faces of the bricks inside the stairs, you will see that you can't do it without editing all the bricks at the same time because they are linked duplicates.
If you didn't use linked duplicates, you shouldn't have this problem, but we are going to make sure that none of the objects in the scene are linked duplicates anyway.
We need to unlink the duplicates in order to fix the bricks, as well as for the next step, which will consist of unwrapping the geometries. If we were to keep the links, both pole lights would be unwrapped on the same coordinates. This would result in the baking being done twice in the same position of the texture.
To unlink the duplicates, go into
Object Mode and select all objects with
A. Even if we are only concerned with the portal bricks and the pole lights, the action we are taking can be applied to the whole scene without consequences.
While all the objects are selected, press
F3 and search for
make single. Then choose
Make Single User > Object & Data:
All previously linked duplicates are now unlinked and we can edit the bricks that overlap the stairs without changing all the bricks.
Remove the faces of the bricks inside the stairs:
Check the whole scene and make sure that you are done with removing the hidden faces.
Forgetting some isn't a big issue and you can still remove them later. But once we start unwrapping the geometries, removing faces at that time might have some consequences.
Fixing faces orientation
One issue we can't see has to do with the orientation of faces. All faces have a front and a back. While this isn't a problem when doing a render, it might create bugs during the baking process and some of the faces might become black. Those faces won't even be rendered in Three.js because, by default, back sides are hidden.
As you might have guessed, this orientation is a matter of normals. When doing extrudes, insets, and other operations like that, we might have flipped the normals unintentionally.
First, we need a way to see the faces orientation. While in
Object Mode, in the top right corner of the Blender
Viewport 3D, click on the following icon:
On the menu which should open, check
You should now see blue faces when the orientation is good and red faces when the orientation is wrong:
In this case only the pole lights are wrong, but you might have a very different result with your model.
If everything is already blue, congratulations, you can skip this step.
To fix the red faces:
- Select the object you want to fix.
- Go into
- Select the faces you want to flip.
F3, search for
Mesh > Normals > Flip.
Once the whole scene is blue, you can uncheck the
Face Orientation and continue:
Another problem is with scaling.
Some objects have been scaled in
Edit Mode, meaning that we are scaling the geometry and not the object itself. Some other objects have been scaled in
Object Mode, meaning that there is a transformation on the object but not on the geometry itself.
Again, while doing renders, it's not really important. But it might create issues when doing the UV unwrapping.
Later in the lesson, we are going to use automatic UV unwrapping and Blender will take into account the geometry size but not the object scale. This might result in some objects taking more space or not as much space as they should. For example, you might end up with the axe taking only half of the texture because the geometry is still huge even though we reduced the object scale.
To fix that, we need to normalize all the scales.
Object Mode, select all the objects with
A , press
CTRL + A to open the
Apply menu and choose
You can't see a difference, but all of the object scales have been applied to their geometries instead. This way, all our objects now have a scale of
We are done with the optimization and we can start to UV unwrap our scene.
Don't forget to save.
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: