Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • CreatiCode
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
Brand Logo

CreatiCode Scratch Forum

  1. CreatiCode Forum
  2. Knowledge Base
  3. Tutorials
  4. 3D - A Stop Sign (Difficulty: 2)

3D - A Stop Sign (Difficulty: 2)

Scheduled Pinned Locked Moved Tutorials
1 Posts 1 Posters 1.7k Views
  • 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.
  • CreatiCodeI Offline
    CreatiCodeI Offline
    CreatiCode
    wrote on last edited by admin
    #1

     

    Key Topics Covered

    • Initializing 3D scenes
    • Using cylinders
    • 3D rotations
    • 3D text

     
     

    Introduction

    In this tutorial, we’ll build a stop sign that looks like this:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/ac81dcd7-6ff9-486c-81ba-e14d4fb05036.gif" width="470" 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.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/43a6f24e-b195-4762-a219-822a46559d96.png" width="400" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">
     
    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:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/dcebc38b-cc87-4eb8-a3f1-6252211315eb.gif" width="460" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    Step 2 - Add Red Cylinder with 8 Sides

    Since the stop sign has 8 side faces, we can use the “add cylinder” block to create it. The “height” should be much smaller than its diameter, since the stop sign needs to be very thin.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/1fa952cb-565f-4130-89d2-d4bc2b6f7b2c.png" width="800" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">
     
    This is what you should get:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a89afa24-d4fd-48e3-b5e4-0c2c1f05fe0f.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    Step 3 - Rotate the Cylinder

    One problem with the cylinder: it has a tip pointing forward, though we need one of its side faces to point forward. Therefore, we need to rotate it slightly:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/a5909def-d412-4ed2-83e8-f4d4dea1836f.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">
     
    To make this happen, we need to rotate the cylinder around the Z axis for about 22 degrees. You can figure this out using the direction tool:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/fa9a7a02-ab27-4dd7-b7b4-f80ef8c94c8e.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">
     
    Here is the block to be added:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/bf39d859-7aa1-4b38-bc2a-8df29caac6dd.png" width="600" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">
     
    In case you are curious, you can also calculate this number using a formula: each of the 8 side faces is 360/8 = 45 degrees, and half of that is 22.5 degrees.

     
     

    Step 4 - Make the cylinder “stand up”

    Since all stop signs are vertical, we need to rotate the cylinder again to make it stand up. Here is what it looks like in slow motion. Can you try to make it happen?

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/f31605be-4b3e-4c6b-90b5-c190448dd06a.gif" width="470" style="">
     
    We need to rotate the cylinder around the X-axis for 90 degrees:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/66dc4dcd-95cc-4f7a-92c8-202109cab52c.png" width="600" style="filter: drop-shadow(0.35rem 0.35rem 0.4rem rgba(0, 0, 0, 0.5));">

     
     

    Step 5 - Add the White Margin

    Next, please try to add a white margin like this. Can you think about how it is done?

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/dd1f1019-ec92-4602-bd6b-6db7e9d31ef6.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">
     
    The white margin can be a slightly larger cylinder itself. We just need to duplicate the blocks for the red cylinder and then increase its diameter. To make sure it does not cover the front and back faces of the red cylinder, we need to make it thinner by setting its height to 7:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/204c418b-33df-492d-9321-f8a2549c53b0.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     
     

    Step 6 - Add the Word “STOP”

    For our last step, we need to add the word “STOP” as a 3D text. Its width should also be 100, so that the text will fit in the cylinder’s area.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/ac81dcd7-6ff9-486c-81ba-e14d4fb05036.gif" width="470" style="border-radius: 5px; border: 1px solid #29622d;">
     
    Note that when you add the text, it will be inside the cylinder, so we can’t see it. We need to move it forward along the Y-axis so it shows in front of the cylinder.

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/6f1f752d-0823-465c-ac65-a39a8330f461.gif" width="1000" style="border-radius: 5px; border: 1px solid #29622d;">

     
    For your reference, here is the complete program:

    2a4b8d0a-15ae-42f3-aa9c-b0cb27dd5219-image.png

     
     

    Creative Ideas

    There are many ways you can extend this project. Here are some ideas for your inspiration:

    1. Other Traffic Signs: you can reuse this idea to add some other traffic signs with different words and colors.

    2. Road Name: you can try to add road name signs above the stop sign, and both of them should be attached to a supporting pole:

    https://cdncreaticodecom.b-cdn.net/scratch-gui-projects/forum/0bca9456-3d2d-4191-8f7a-78ffcabf17ea.png" width="600" style="margin-left: 40px; border-radius: 5px; border: 1px solid #29622d;">

    1 Reply Last reply
    0
    • CreatiCodeI 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
    Reply
    • Reply as topic
    Log in to reply
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes


    • Login

    • Don't have an account? Register

    • Login or register to search.
    • First post
      Last post
    0
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • CreatiCode