obniz developer team
Published

Rotate a 3D object when pressing a button

Press the button, you can rotate the 3D object displayed as HTML in your web browser.

BeginnerFull instructions provided1 hour233

Things used in this project

Hardware components

obniz
Cambrian Robotics obniz
×1
Adafruit buttons
×1

Story

Read more

Code

Untitled file

HTML
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
    <script
      src="https://unpkg.com/obniz@3.x/obniz.js"
      crossorigin="anonymous"
    ></script>
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <a-scene>
      <a-sky></a-sky>
      <a-cube color="#00FF00" position="0 2 0" width="2" height="2" depth="2">
        <a-animation
          id="cube"
          attribute="rotation"
          to="0 0 0"
          direction="normal"
          dur="4000"
          repeat="indefinite"
          easing="linear"
        >
        </a-animation>
      </a-cube>
    </a-scene>

    <script>
      const obniz = new Obniz("OBNIZ_ID_HERE");
      obniz.onconnect = async function() {
        let button = obniz.wired("Button", { signal: 0, gnd: 1 });
        let cube = document.getElementById("cube");
        button.onchange = function(pressed) {
          if (pressed) {
            cube.setAttribute("to", "0 360 0");
          } else {
            cube.setAttribute("to", "0 0 0");
          }
        };
      };
    </script>
  </body>
</html>

Credits

obniz developer team

obniz developer team

80 projects • 33 followers
Development board "obniz" is controlled via the internet.

Comments