3D - Building a Simple Table (Difficulty: 2)

CreatiCode

Introduction

Tables have a very simple structure, and they are perfect for practicing how to control the size, shape, and position of objects. In this tutorial, you will learn to build a few tables of different structures and shapes.

Step 1 - Start with an Empty Project

On the CreatiCode playground, log in to your account, then create a new project named “3D Tables”. Remove the “Sprite1” with the dog costume, and we will write code in the “Empty1” sprite.

Step 2 - Initialize a 3D Scene

You can pick a very simple scene as the background, such as the ‘Grass Land’ or ‘Classroom’, so long as it has a ground or floor to place the table.

Step 3 - Add the 3D Axis

If you are not very familiar with the 3D coordinate system, it will be very helpful to add the 3D axis during development:

As shown, by default, the X axis points to the right, the Y axis points forward, and the Z axis points up.

Step 4 - Add a Square Tabletop

Next, we will start with the tabletop. To keep it simple, let’s use a white box with a square face. The width and length will be 200 (X and Y dimensions), and the thickness (Z dimension) will be 10:

The center point of this box will have a z position of 0, so half of the box is above ground, and half is below:

Note that we are giving the box the name “tabletop”. This is optional, but there are 2 benefits:

For anyone reading our code (maybe our future selves), the name helps tell what this box is used for;
In the sprite info pane, we can clearly see that the tabletop is the selected “sprite object”, and its position/scale/size information is also displayed.

Step 5 - Move the Tabletop Higher

Now let’s move the tabletop above the ground. Let’s set its z position to 100, which means its center will be 100 units above ground.

Note that since the tabletop has a thickness of 10, its bottom face is 5 units below its center point. That means the bottom face is actually 95 units above the ground, and the top face is 105 units above the ground.

Step 6 - Add a Pedestal

For the simplest table structure, we only need one pedestal to support the tabletop. We can use a wooden-color box, with a width/length of 50, and a height of 100. Note that the height matches the Z position of the tabletop.

The pedestal will be centered at the Z position of 0 as well, so only half of its height is above the ground:

Step 7 - Move the Pedestal Above Ground

To move the pedestal above ground, we need some simple calculations. We want its bottom face to be at the Z position of 0, and its top face should be at Z of 100, so its center should be at Z of 50, which is half of the height.

Now the table is completed:

Step 8 - Transparent Tabletop

If you are sensitive with numbers, you may have noticed a small issue: the top face of the pedestal is at Z of 100, but the bottom face of the tabletop is at 95. That means the top of the pedestal is actually “plugged” into the tabletop. This is OK since it is hidden inside the tabletop and no one would see it. In most 3D projects, we only care whether things “look right”, and objects often overlap with each other in hidden places.

To illustrate this, we simply need to set the tabletop to semi-transparent:

And we will see that the top of the pedestal is at the center of the tabletop:

Step 9 - A Cylinder Pedestal

We can easily change the pedestal to a cylinder. We can use 50 for its diameter, and keep the same height of 100.

This is how it looks:

Step 10 - A Frustum-Shaped Pedestal

You may have seen tables with a frustum-shaped pedestal, where the top and bottom diameter of the cylinder is different. For example, we can change the bottom diameter to 100:

Now the table looks like this:

Step 11 - Change the Pedestal to A Leg

Next, let’s change the table to have 4 legs. Let’s still use a thin and tall box for the first leg named “leg1”:

Step 12 - Move the Leg to the Right-Front Corner

Since we will have 4 legs, each leg should support one of the 4 corners of the table. We will need to do some calculations for the X and Y positions of the first leg.

If we look at the table from the top, we can see that it is a square of 200 by 200. Since its center is at X = 0 and Y = 0, that means its top right corner is at X = 100 and Y = 100. We can place the first leg inside the corner, like X = 80 and Y = 80.

Now we plugin these 2 numbers into the “move to” block:

We can see the leg is moved to the right-front corner:

Step 13 - Another Leg

Now let’s add another leg on the left. We can duplicate the bottom 2 blocks. Since the legs are symmetric, the X position of the second leg will be opposite of 80, which is -80.

When we run this code, something strange happens, as we will only see one leg on the left. Can you guess why?

Step 14 - Name the Second Leg Differently

It turns out the problem comes from the name of the legs. When we add the second leg, but give it the same name of “leg1”, the 3D engine finds that there is already an existing object named “leg1” from the same sprite. Therefore, to ensure every object in this sprite has a different name, the 3D engine will automatically remove the existing leg before adding the new leg.

To fix this issue, we can rename the second leg as “leg2” or leave the name blank, so it will be named automatically.

Now we get 2 legs correctly:

Step 15 - Add 2 More Legs

We can follow the same approach to add 2 more legs on the back. Note that their Y position will be opposite of 80, which is -80.

And now we get a complete table with 4 legs:

Step 16 - A Longer Table

Next, let’s make a long table, so its top is not a square, but a rectangle of 400 x 200. We just need to modify the X size of the tabletop:

Now the table looks like this:

Step 17 - Move the First Leg to the Right

It looks like the 4 legs can not support this longer table well. We need to move them further apart. Let’s still start with the first leg on the right front. As shown below, the table’s right front corner has moved from (100, 100) to (200, 100), by a distance of 100. So it makes sense to also move the leg by 100, which means its X position will change from 80 to 180:

We just need to change one number in our code:

Now the leg is moved to a better position:

Step 18 - Move the Other 3 Legs

Now we just need to make a similar change for all the other 3 legs. Their X position will become 180 or -180:

The table looks much better supported now:

Step 19 - Add a Basketball

Lastly, let’s place a basketball on the table. First, add a “Basket Ball” model to the scene:

As shown, unlike boxes, the basketball model will appear above the ground when its Z position is 0. This is one of the key differences between simple shapes (boxes, spheres, cylinders, etc) and models/avatars.

Step 20 - Move the Basketball Onto the Table

To place the basketball on the table, we need to set its Z position to be the same as the tabletop, which is 100:

This is what we get:

Do you notice any issues? How to fix it?

Step 21 - Move the Basketball Above the Tabletop

There is one small issue. As discussed earlier, the tabletop’s center is at Z of 100, and because its thickness is 10, its top surface is at Z of 105. Since the bottom of the basketball is at Z of 100, the bottom slice of the basketball is inside the table.

Therefore, to make sure the basketball is placed on the tabletop, we need to set its Z position to 105, not 100:

Now we get a complete basketball on the table:

Creative Ideas

In this tutorial, you learned how to set the size and position of objects correctly. There are many shapes and models you can use on the CreatiCode platform, and you can use them to build almost any object. Here are some ideas for your consideration:

Chair
School Bus
House
Castle
3D Maze