Navigation

    CreatiCode Scratch Forum

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode

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

    Tutorials
    1
    1
    949
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • info-creaticode
      CreatiCode last edited by admin

      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.

      e3.gif

       
       

      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.

      6ecc1d6f-8b92-4023-8748-d06991a44405-image.png

       
       

      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:

      2965bb72-cc94-488a-a29a-4187e2f5ef23-image.png

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

      e3.gif

       
       

      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:

      375044ea-2853-44c3-a604-3c4f439d1fa8-image.png

       
      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:

      e3.gif

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

      1. For anyone reading our code (maybe our future selves), the name helps tell what this box is used for;
      2. 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.

      8d010aef-4232-4cc2-a56b-4a32f344293c-image.png

       
      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.

      e3.gif

       
       

      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.

      ea4af0c8-f841-448c-859d-8e9c7b9f7b4b-image.png

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

      e3.gif

       
       

      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.

      63c00dd9-5292-4ba5-9d23-93ad8f42d01b-image.png

       
      Now the table is completed:

      e3.gif

       
       

      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:

      e3.gif

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

      e3.gif

       
       

      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.

      9fdf662b-de75-464c-8a2f-54ae3288c81d-image.png

       
      This is how it looks:

      e3.gif

       
       

      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:

      7ca5860b-aa74-46e9-aea1-3bb5a8e0803e-image.png

       
      Now the table looks like this:

      e3.gif

       
       

      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”:

      73a718f6-6ee3-4da4-b64d-82fbdfdd253d-image.png

       
      e3.gif

       
       

      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.

      069f5bbe-b6ed-401c-97c8-98aef59733d4-image.png

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

      21e7c59f-0df8-482c-9e23-ed07080f4c96-image.png

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

      e3.gif

       
       

      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.

      e3.gif

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

      e3.gif

       
       

      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.

      f9102bad-f24b-43d8-a743-3fc33a5ead4d-image.png

       
      Now we get 2 legs correctly:

      e3.gif

       
       

      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.

      2270db4b-2a20-4189-bb21-16e638817bbb-image.png

       
      And now we get a complete table with 4 legs:

      e3.gif

       
       

      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:

      8cfb0b2f-8d85-4baf-939d-116ae4c08154-image.png

       
      Now the table looks like this:

      e3.gif

       
       

      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:

      a3dab02b-5061-4231-bc8d-272a04d71506-image.png

       
      We just need to change one number in our code:

      9755dd01-3076-4c4f-a780-bbcf62bd5c9c-image.png

       
      Now the leg is moved to a better position:

      e3.gif

       
       

      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:

      27e159f9-b91d-472c-a61c-3fcaf9674a21-image.png

       
      The table looks much better supported now:

      e3.gif

       
       

      Step 19 - Add a Basketball

       

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

      8a15f9a8-a99d-47ea-9706-2a099a96bcdd-image.png

       
      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.

      e3.gif

       

       
       

      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:

      2c724b9b-ce52-4e3e-b910-1b9529036afe-image.png

       
      This is what we get:

      e3.gif

       
      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:

      a130a906-5002-4005-bcef-f80b4ba5c3fd-image.png

       
      Now we get a complete basketball on the table:

      e3.gif

       
       

      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
      1 Reply Last reply Reply Quote 0
      • Pinned by  info-creaticode info-creaticode 
      • First post
        Last post