Your First Program
Usually the complexity of programming languages is judged by how easy it is to print out "Hello World" on the screen. You can check variations of that on this Wikipedia page. In this lesson we will compose a few blocks of code to make that happen, but in 3D! Isn't it exciting?
Start The Application
First thing we will need to do is open up our Application on https://bitbybit.dev/app?editor=blockly. This will immediately start an empty Blockly workspace. Now we will need to find two components in order to compose the Hello World application.
Draw Component
To draw things on the screen in the Blockly editor requires a draw component. You can draw points, lines, polylines, solids and other kinds of objects. It is one of the most important categories, thus you can find it on top of all of the categories that exist. Click on "Drawing" -> "Draw" -> "Draw babylon mesh". Also check out the following picture and click on the marked component to put it on your script canvas. Here is the path to a draw component in Blockly:
"Draw" -> "draw async" -> "drawAnyAsyncNoReturn"
We use "drawAnyAsyncNoReturn" because we are not going to use the output of this component. Programmers can think about it as a void returning function. If we were to use the output, which is a BabylonJS Mesh, we would use a variant of this component that does return a value.
We will now need to find another necessary component to draw a 3D text. Here is the path to it:
"Advanced" -> "Text3d" -> "create" -> "create"
This component will create a shape from the text that input. Drag and drop this component to your "entity" input of the "drawAnyAsyncNoReturn" component. Change the "text" input to "Hello World!". You should now have two components on your canvas - one inside the other as in the script below. In order to compute the result you must run your script by hitting a "Run" button that looks like an arrow pointing to the right.
Now that this is done feel free to adjust some of the text setting.
Also add a grid component to the canvas so that you could orient yourself better. Find the component by following this path:
"Draw" -> "grid" -> "drawGridMeshNoReturn"
Drag this component in a way that its bottom attaches to the top of "drawAnyAsyncNoReturn" component. This is needed for a better organization of your code. If you completed the steps correctly you should see this result in your editor:
Congratulations! You completed the "Hello World" tutorial. We hope it was not too difficult. Proceed to the next one.