Somnia Docs
Developer DiscordTestnet Homepage
Somnia Playground
Somnia Playground
  • Welcome
  • Getting Started
    • Create your first avatar
    • Create your first world
    • Place your first object
    • Create your first object
    • Creating a custom world
  • Beginner guides
    • Using the mml editor and creating your first dynamic object
    • The mml editor tour
  • Components
    • Avatar Builder
    • Item Builder
    • Item Gallery
    • World Builder
    • MML and MML Editor
  • Resources
    • MML Reference Docs
    • MML Examples
      • A Basic Scene With Models And Cubes
      • A Dice With Advanced Animation
      • A 3D Video Player
      • Interaction With A Weather API
      • A Simple Clock
      • Tic Tac Toe Game
    • Glossary
Powered by GitBook
On this page
Export as PDF
  1. Resources
  2. MML Examples

A Simple Clock

PreviousInteraction With A Weather APINextTic Tac Toe Game
<m-group y="4">
  <m-cylinder color="lightgrey" radius="4" height="0.1" rx="90"></m-cylinder>
  <m-group id="hour" rz="0" z="0.1">
    <m-cube sx="0.14" sy="1.2" sz="0.08" z="0.04" color="#000000" y="0.2"></m-cube>
  </m-group>
  <m-group id="minute" rz="0" z="0.11">
    <m-cube sx="0.1" sy="2.4" sz="0.08" z="0.04" color="#000000" y="0.3"></m-cube>
  </m-group>
  <m-group id="second" rz="0" z="0.12">
    <m-cube sx="0.08" sy="3.2" sz="0.08" z="0.04" color="#ff0000" y="0.8"></m-cube>
  </m-group>
</m-group>

<script>
  function setTime() {
    const d = new Date();
    document.getElementById("hour").setAttribute("rz", (d.getHours() / 12) * -360);
    document.getElementById("minute").setAttribute("rz", (d.getMinutes() / 60) * -360);
    document.getElementById("second").setAttribute("rz", (d.getSeconds() / 60) * -360);
  }

  setTime();

  setInterval(setTime, 1000); // update every second
</script>