3D - A Carpet (Difficulty: 2)
-
Key Topics Covered
- Initializing 3D scenes
- Updating textures
- Using cylinders
- Updating scale
- Updating color
- The “z-fighting” problem
Introduction
In this tutorial, we’ll build a carpet. Here is a preview:
https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/882c5a4d-f696-4895-9b5f-68a80c71d6ac.gif" width="440" style="border-radius: 5px; border: 1px solid #29622d;">
Step 1 - An “Empty” Scene with 3D Axes
Please create a new project, remove the dog sprite, and add these blocks in the “Empty1” sprite. You can find the “initialize 3D scene” and the “show 3D axis” blocks in the “3D Scene” category.
As shown, the X-axis points to the right, the Y-axis points forward (into the screen), and the Z-axis points up. You can drag your mouse on the stage to rotate the camera around it:
Step 2 - Add A Cylinder
Our carpet will be round-shaped, so let’s add a very thin cylinder. You can pick any color or size you like:
Now you should get a round carpet like this:
Step 3 - Increase the number of “sides”
You have probably noticed that the edge of the cylinder is not very smooth. This is because we only use 32 side faces, so we can see the edges between them when we zoom in.
To improve the result, we can increase the number of sides to a larger number, such as 128.
Now the cylinder’s edge looks much smoother:
Step 4 - Scale the cylinder in the X dimension
Now we need to change our carpet to an oval shape. We can use the “update scale” block to stretch the cylinder to 150% of its current size along the X dimension.
Now we get an oval carpet:
Step 5 - Update the Texture
Our carpet looks like something made of plastic. To give it a more realistic look, we need to update its texture. You can use the “Carpet” texture, or try some other texture you like.
Now the carpet looks like a real one:
Step 6 - Update the Color
We lost the original color of the cylinder when we add a texture to it. To get the color back, we can use the “update color” block:
This change will give us a colored carpet:
Step 7 - A Second Layer
Next, let’s add a smaller cylinder with a different color. You can right-click to duplicate the 4 blocks used for the first part, and then change the size and color of it:
Step 8 - Fix the display issue
There is a minor issue with our carpet. The inner cylinder does not display clearly. This is because the top faces of the 2 cylinders are overlapping, so the 3D engine tries to show both cylinders at the same time. In case you are curious, this is called the “z-fighting” problem.
An easy fix is to make the inner cylinder slightly thicker, so that its top face covers the outer cylinder. For example, a height of 4.5 would be enough, and most people would not notice the difference unless they look really closely.
Step 9 - The “add layer” block
Before we add more layers to our carpet, it is a good time to “refactor” our program to avoid duplicate blocks.
As you can observe, there is a clear pattern that every layer would take the same set of 4 blocks, and we need to set different sizes and colors for them. So we can start by making a new block called “add layer”, and make it accept 3 inputs of “size”, “height” and “color”:
Next, we can move the 4 blocks for one layer into this new block’s definition, and then drag the 3 input blocks to the correct place.
Lastly, we can start to use this new block to add the 2 layers. Note that for the “color” input, we need to use the color block, which allows you to set the color value using numbers (instead of sliders).
Step 10 - Add a Third Layer
With the new “add layer” block we have made, it is very easy to add another layer that’s smaller and thicker:
Step 11 - Change the Texture
It is also very easy to change the carpet. We only need to change the blocks in the “add layer” stack. For example, here is how to create a carpet made of floor tiles.
Here is the complete program for your reference:
Creative Ideas
There are many ways you can enhance this carpet project. Here are some ideas for your inspiration:
-
I CreatiCode pinned this topic on
Hello! It looks like you're interested in this conversation, but you don't have an account yet.
Getting fed up of having to scroll through the same posts each visit? When you register for an account, you'll always come back to exactly where you were before, and choose to be notified of new replies (either via email, or push notification). You'll also be able to save bookmarks and upvote posts to show your appreciation to other community members.
With your input, this post could be even better 💗
Register Login