Your First Program
OK, let's get started. 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 Editor
First thing we will need to do is open up our Editor on https://bitbybit.dev/app?editor=typescript. This will immediately start an empty TypeScript workspace.
Draw The Grid
First we will create a bit of a boilerplate code - asynchronous start function. For drawing the grid it is not necessary, as code would also work without it, but our further example will need this asynchronous context to execute other functions of bitbybit.dev
Then we need to create the options of the grid and call the drawGridMesh function as shown in the script below. gridOptions variable controls the properties of the grid. Intellisense will offer you all the available options. You can also find them in the documentation.
If you hit Run button you will see the grid appear on your screen.
Find the swap canvas button with two arrows and click it. You will be able to interact with it - rotate with the left mouse button, zoom with the scroll wheel on the mouse or two fingers on your trackpad.
When you want to return to the script, click the same button with two arrows. Feel free to experiment with the properties of grid options directly in the editor. You can change the color and other parameters easily, for example by adding this line before drawGridMesh function gets called "gridOptions.mainColor = "#ff0000";"
Create 3D Text
If you are done with the grid, let's move on to the next step. We are now going to create a 3D text options and the shape itself. To do that we will call "bitbybit.advanced.text3d.create" function. Notice how this path to the function is the same as if you would use the Rete or Blockly editors.
The script below has a working example, where rotation is set to -90 degrees, originAlignment to centerBottom, and direction is [0, 0, -1] to make text face the camera. You can experiment with other properties and configurations to understand what these properties do.
After you are finished, the result should look like the script shown above. You have now created a grid and a 3D text.
Probably you begin seeing the pattern where inputs are defined by instantiating a separate class. Both grid and text3d have their own options classes. This is done to make it easier to understand what properties are available for each algorithm. You can find all the available properties in the documentation. If you would use Rete or Blockly editors, these inputs match the inputs on the components.
To figure out what options class needs to be used for methods you can use intellisense of the editor.