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=rete. This will immediately start an empty Rete workspace.
Draw The Grid
If you see the canvas, first let's find the "Draw" category with paint brush icon on the top left side of the component navigation menu. There locate component named "draw grid". Click on it and it will be added to your canvas. Another way to do this is to right mouse click on the canvas and in the search toolbar enter words "draw.drawGridMesh". This will find that same component. Click on the result and it will also appear on the canvas. If you did it right, you should see the result as seen in this script below.
If you hit Run button that looks like a play icon, you will see the grid appear on the canvas. Keep in mind that you need to hit Run only the first time you open the script, after that Rete will react to any change you make to your components and will recompute automatically. This is done so that scripts would not execute automatically on our platform. Imagine executing a script that takes forever to finish, that would not be a good experience.
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 component seen in the example directly in the editor. You can change the color and other parameters easily.
Create 3D Text
If you are done with the grid, let's move on to the next component. Find the "Advanced" component category in the menu that is illustrated with the glasses icon. Hit "Text3d" subcategory and find the component called "create 3d text". Click on it and it will be added to your canvas. You should now have two components on your canvas. This time you will also need to adjust some of the properties of your text component. This is what you have to change.
After you are finished, the result should look like the script shown above. You have now created a grid and a text - two components that are unrelated. That is totally fine, you do not always need to connect components. But we will create your first connection in the next step.
Create Connections
Currently your 3D text lies on the ground. And what we want to do is to orient it in such a way that it faces the camera. We will need the "vectorXYZ" component. To find it, practice using search toolbar. You can click right mouse button on the canvas, type "vectorXYZ" and click the component that pops up. Now change it loke this:
After you did that click on the output block of the component and with mouse button pressed drag the wire towards the "create 3d text" component and connect it to the input called "direction". Congratulations, you have made your first connection between the components!
Here is the result that you should see:
This short tutorial concludes with this latest script. We learnt how to create components on the canvas, how to run scripts, swap canvas to enter 3D mode. We also changed some default inputs of the components, made adjustments to the scripts and finally we established our first connection between nodes.
if you have signed up to our platform, you may have noticed that this script produces similar result as a default rete script. Now you have a better undersstanding how it works.