Your First 3D "Hello World" Program with Blockly

The "Hello World" program is a classic starting point for learning any new programming language or environment. It's often used to gauge the initial complexity. You can find many variations of this on Wikipedia.

In this lesson, we'll assemble a few Blockly blocks to create our "Hello World" message – but in 3D! Let's get started.

1. Start The Application

First, open our Blockly editor in your browser: https://bitbybit.dev/app?editor=blockly

This will open an empty Blockly workspace. We'll need to find and add a couple of components to build our 3D "Hello World."

2. Adding the Necessary Blocks

The Drawing Block

To display anything in the 3D scene using the Blockly editor, you need a drawing block. This block can draw various objects like points, lines, solids, etc. The "draw" category is one of the most important, so you'll find it at the top of the Blockly toolbox.

1. In the Blockly toolbox, navigate to: "draw" -> "draw async"

2. Drag the block named draw any async no return onto your workspace.

   Why `draw any async no return`?

   We use this specific block because, for this simple "Hello World," we are not going to use any output (like a reference to the created 3D mesh) from the drawing operation. Programmers can think of this as a function that returns void. If we needed to use the output (which would be a BabylonJS Mesh), we would choose a variant of this block that does return a value.

The 3D Text Creation Block

Next, we need a block that creates the 3D text geometry itself.

1. In the Blockly toolbox, navigate to: "advanced" -> "text 3d" -> "create"
2. Drag the block named text 3d (or similar, for creating 3D text) from this category.
3. Connect this text 3d (3D text) block to the input slot labeled "entity" on the draw any async no return block.
4. Find the input field labeled "text" on the text 3d (3D text) block. Click inside it and change the default text to Hello World!.

At this point, your workspace should have two main blocks connected: the draw any async no return block with the create (3D text) block plugged into its "entity" input.

Run the Script

To see the result, you must run your script. Click the "Run" button (it usually looks like a play icon ▶️) in the Blockly interface.

Your setup should resemble this interactive example:

Draw 3D Text

Blockly

Script Source (blockly)

<xml xmlns="https://developers.google.com/blockly/xml"><block type="bitbybit.draw.drawAnyAsyncNoReturn" id="UO^K1-FNciNjT{DsaF2S" x="777" y="-1296"><value name="Entity"><block type="bitbybit.advanced.text3d.create" id="96`l1M5GUB]yx+`8P*5h"><value name="Text"><block type="text" id="TpWq7^,UoX^4,_e9p4a9"><field name="TEXT">Hello World!</field></block></value><value name="FontType"><block type="bitbybit.advanced.text3d.fontsEnum" id="WTF*(Tuo^XFp#-.~guL%"><field name="bitbybit.advanced.text3d.fontsEnum">'Aboreto'</field></block></value><value name="FontVariant"><block type="bitbybit.advanced.text3d.fontVariantsEnum" id=":/BDwM-k7#lt_,Qt[:_x"><field name="bitbybit.advanced.text3d.fontVariantsEnum">'Regular'</field></block></value><value name="FontSize"><block type="math_number" id="1|M5}vy@rvtE}ZPx3jQ_"><field name="NUM">1.5</field></block></value><value name="Height"><block type="math_number" id="Zr_+VDSsSpb{}@!q^tvd"><field name="NUM">0.2</field></block></value><value name="Rotation"><block type="math_number" id="j*me)eW9Yg0U}EE(B8YH"><field name="NUM">0</field></block></value><value name="Origin"><block type="bitbybit.vector.vectorXYZ" id="yfcEbk*^!n{JH?J^N+^z"><value name="X"><block type="math_number" id="QHZy=Z3Z@hGacPh]kvRb"><field name="NUM">0</field></block></value><value name="Y"><block type="math_number" id="f-9#b#2j/{+YhMaPFC:z"><field name="NUM">0</field></block></value><value name="Z"><block type="math_number" id="`Ra,vn?IZ[J,SK{}!2@|"><field name="NUM">0</field></block></value></block></value><value name="Direction"><block type="bitbybit.vector.vectorXYZ" id="_5EKW]4zfhXFR0Jlq-O#"><value name="X"><block type="math_number" id="!*L8}*msE{+bc,rDeEii"><field name="NUM">0</field></block></value><value name="Y"><block type="math_number" id="{0f6ZLiOt~jH6+h!uRU_"><field name="NUM">1</field></block></value><value name="Z"><block type="math_number" id="#x1[0ajwIMsol-lm)58F"><field name="NUM">0</field></block></value></block></value><value name="OriginAlignment"><block type="bitbybit.advanced.text3d.recAlignmentEnum" id="8G{HX8*n1uirjgqo|Dbk"><field name="bitbybit.advanced.text3d.recAlignmentEnum">'leftTop'</field></block></value></block></value></block></xml>

3. Adjusting Text Properties and Adding a Grid

Now that you have your 3D "Hello World" text, let's adjust some of its properties for better presentation and add a grid for orientation.

Modify Text Block Parameters:

Find your text 3d (3D text) block and change the following input values:

• Change "font type" from "Aboreto" (or default) to "Roboto".

• Change "origin alignment" from "leftBottom" (or default) to "centerBottom".

• Change "direction" from "0, 1, 0" (or default, Y-up) to "0, 0, -1" (this will make the text face the default camera view, assuming Z is depth).

  (Note: The exact names of these input fields might vary slightly, but look for parameters controlling font, alignment, and orientation/direction.)

Add a Grid Block:

A grid helps in orienting yourself within the 3D space.

1. In the Blockly toolbox, navigate to: "draw" -> "grid"
2. Drag the block named draw grid mesh no return onto your workspace.
3. Connect this draw grid mesh no return block by attaching its bottom connector to the top connector of your existing draw any async no return block (the one drawing the text). This sequences the drawing operations – first the grid, then the text. This is also good for organizing your script visually.

After completing these steps, your Blockly script should look similar to this:

Draw 3D text and grid

Blockly

Script Source (blockly)

<xml xmlns="https://developers.google.com/blockly/xml"><block type="bitbybit.draw.drawGridMeshNoReturn" id="lDICi^VGh~NwNzo5jG)h" x="-120" y="-1392"><value name="Width"><block type="math_number" id="}I=k_?GAsFVlu7Q2CFI}"><field name="NUM">400</field></block></value><value name="Height"><block type="math_number" id="K)2%0O,HF_b#DaorC;sI"><field name="NUM">400</field></block></value><value name="Subdivisions"><block type="math_number" id="}QMA.2k{Q%|;cgF6n4;"><field name="NUM">10</field></block></value><value name="MajorUnitFrequency"><block type="math_number" id="InuLK:6VnHZDm7kXJZ7?"><field name="NUM">10</field></block></value><value name="MinorUnitVisibility"><block type="math_number" id="A1DI6uQ2hsfgD21:Nul]"><field name="NUM">0.45</field></block></value><value name="GridRatio"><block type="math_number" id="s}=w]RFx5^;roEtkeLM4"><field name="NUM">0.5</field></block></value><value name="Opacity"><block type="math_number" id="7VABo|Jk5lDD7!(k0B:T"><field name="NUM">0.5</field></block></value><value name="BackFaceCulling"><block type="logic_boolean" id="8$%s9!K4B@xd2wz%Q9xj"><field name="BOOL">FALSE</field></block></value><value name="MainColor"><block type="colour_picker" id="7]ODl?MQ:bR7daF]RD?Y"><field name="COLOUR">#ffffff</field></block></value><value name="SecondaryColor"><block type="colour_picker" id="ED/|Gi]W{(jW=l}LlNU%"><field name="COLOUR">#ffffff</field></block></value><next><block type="bitbybit.draw.drawAnyAsyncNoReturn" id="UO^K1-FNciNjT{DsaF2S"><value name="Entity"><block type="bitbybit.advanced.text3d.create" id="NEsOJ~cGr]JZu/wLHk(w"><value name="Text"><block type="text" id="?4t}~C[bkj38YFQ.XBh"><field name="TEXT">Hello World!</field></block></value><value name="FontType"><block type="bitbybit.advanced.text3d.fontsEnum" id="kdi]-UT7*y](~D3@xwv"><field name="bitbybit.advanced.text3d.fontsEnum">'Roboto'</field></block></value><value name="FontVariant"><block type="bitbybit.advanced.text3d.fontVariantsEnum" id=";:#Pa7+17#2)ekxYmiXg"><field name="bitbybit.advanced.text3d.fontVariantsEnum">'Regular'</field></block></value><value name="FontSize"><block type="math_number" id="v_Y_FVX~~=gO*u8,U)Yy"><field name="NUM">1.5</field></block></value><value name="Height"><block type="math_number" id="u/jN;Q1}#Hirc.@_:jm"><field name="NUM">0.2</field></block></value><value name="Rotation"><block type="math_number" id=";h$yi%$MlF6}1d_/=}"><field name="NUM">-90</field></block></value><value name="Origin"><block type="bitbybit.point.pointXYZ" id="Ybq5TX9~7qVyrp2TPP{T"><value name="X"><block type="math_number" id="Aw_y/;iYU_ng$l$6HKk9"><field name="NUM">0</field></block></value><value name="Y"><block type="math_number" id="m)f+3L-S-GPHS(1TUf1N"><field name="NUM">0</field></block></value><value name="Z"><block type="math_number" id="hKtj.yvuexRJ$s@s3dE;"><field name="NUM">0</field></block></value></block></value><value name="Direction"><block type="bitbybit.point.pointXYZ" id="oE|;?,27:3~}xTf;7#|)"><value name="X"><block type="math_number" id="rt($Rk0#Hb-~d0C6d?5+"><field name="NUM">0</field></block></value><value name="Y"><block type="math_number" id="l;B*tj~0^fLzmz46XXkg"><field name="NUM">0</field></block></value><value name="Z"><block type="math_number" id="Y%s*SUmVK}34L}dPUL4J"><field name="NUM">-1</field></block></value></block></value><value name="OriginAlignment"><block type="bitbybit.advanced.text3d.recAlignmentEnum" id="cBGt}zM8^T0b8.%unx3~"><field name="bitbybit.advanced.text3d.recAlignmentEnum">'centerBottom'</field></block></value></block></value></block></next></block></xml>

Remember to click "Run" to see the updated scene with the grid and the re-oriented "Hello World!" text.

Congratulations!

You've successfully completed the "Hello World" tutorial using Blockly on our platform! We hope it wasn't too difficult and gave you a good first taste of creating 3D content with visual blocks.

Feel free to proceed to the next tutorial to continue your learning journey.