A Simple Clock
<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>
Last updated