Using the mml editor and creating your first dynamic object

We will create a simple dice that spins when we click it.

We are first going to create a 3d dice model.

First create a new project. Head over to https://mmleditor.com/ and click the create project button:

If you want to learn about the different parts of the mml editor you can go to this guide. If you just want to create the object click the code editor window and add the following code:

<m-model 
    id="dice" 
    src="https://public.mml.io/dice.glb" 
collide="true">
</m-model>

Explaining this code

This code is one of the simplest primitives in MML. It creates a 3d model of an object. The <m-model> tag tells the interpreter this is a model. The id is used to give the object and id, which we can later reference in code to manipulate the object. The src parts point to where the 3d model of the object is. This would be on some storage solution. The collide tag means that if other objects or avatars touch this object, it will have collisions. You can find all the tags associated with an m-model here https://mml.io/docs/reference/elements/m-model

Your editor should now look like this:

You can now do some simple things in the editor. Let's try moving the dice around. To do this click on the dice in the edit window. This should look like this:

You can now move the dice around the scene by left-clicking and dragging the arrows. The green arrow will move up and down, the red arrows left and right, and the blue arrow forward and backward. Let's move the dice so it's above the ground.

You will see the dice move in real-time in the play editor and also the code updating the x, y and z values:

<m-model id="dice" 
         src="https://public.mml.io/dice.glb" 
         collide="true" y="5.348" x="3.404">
</m-model>

Ok we are now going to add some code to make the dice spin when we click it. First add the following javascript. We have annotated it with comments to explain how it works:

<script>
  let counter = 1;
  // Let's make the dice spin
  function spinDice() {
    // Gets the dice object based it's id
    const dice = document.getElementById("dice");
    // Sets the  dice objects ry value (changes it's rotation). This will spin it by 36 degrees each time we click it
    dice.setAttribute("ry", (counter / 10 * 360) % 360);
    counter = counter + 1
  }
</script>

We now need to add the onclick event to the dice. this will call the code we wrote above when we click the dice:

<m-model id="dice" 
         src="https://public.mml.io/dice.glb" 
         collide="true" y="5.348" x="3.404" 
         onclick="spinDice()"></m-model>

It should look like the window below if you have everything in the right place:

Now if you click the dice in the play window you will see it Spin! Congratz you just made your first dynamic mml object. Now try uploading it using the item builder and using it in the playground!