Tutorial 3: Box with QR-code
In this tutorial you will:
- Apply a texture
- Add physical properties
- Use multiple visuals
Let's start by creating a new component in the Library page. If you don't know how to do it, please take a look to Creating a new component. We are going to re-use the initial cube generated for this tutorial.
Apply a texture
Now, switch to the 3D tab and expand everything in the tree until the visual element is visible and then right-click it to get the available options. Then, click on material to add the element.
Next, right-click on material and click on the texture option. As you can see, you need to choose between having a color property or a texture one.
Select the texture element and then click on the value property, located at the bottom.
A modal will be shown. Pick your texture asset and click on OK.
Now your cube will have a cardboard texture!
Add a friction coefficient
One of the possible base_link children is the surface element. It will allow you to define the bounciness and then friction coefficients of your component. To add it, let's right-click on the base_link and click on surface.
Select the friction child of surface and then click on the value property, located at the bottom.
A modal will be shown. Let's put 0.9 and click on OK.
In order for the friction to be applied, an inertia and a collision must be added to the base_link. Otherwise, the component would be floating and it wouldn't collide with other components or even the floor.
Let's right-click on base_link to add them with their default values. The mass will be 1kg by default and the collision will be a cube of 1m x 1m x 1m, which is the same as our current visual cube.
A body (base_link) can have multiple visuals with different positions (origin). This is useful for combining several parts in a unique element, for example in a button (case + proper button).
In our case, we will have a box plus the qr-code. Right-click on base_link and pick visual to add another one.
Let's start by downloading the qr-code image (you can use your own one too), and upload it as an asset.
As the bardcode is a 2D image, let's use a plane as visual. Right-click on the geometry inside the new visual and choose box2d. Then, inside box2d change the size property to (0.5, 0.5) to make it smaller.
The plane is still not being shown as it is inside the cube. Therefore, click on the origin property of the visual and click on the Value field at the bottom to set the Z-position to 0.51 in order to move the plane on top of the cube.
Visuals are centered in (0,0,0). As the cube has a default size of (1,1,1), it will go from -0.5 to 0.5 in each axis.
To display the image in the plane (box2d), let's add a texture to the visual as we did at the beginning of the tutorial:
First, add a material to the visual and right-click it to select texture. Next, left-click the texture element and then click on the Value field located at the bottom. Finally, on the modal displayed, choose the qr-code asset.
The box with qr-code is now ready! You can save it now and start playing with it.
You can now add it to a library and start playing around. You can see an example below: