Rotate a 3D object when pressing a button

Make things

A 3D object on a browser rotates when a button is pressed.

Materials

• obniz Board
• button

How to make

Hardware connection

Referring to the library, of the two pins on the button, connect one to number 0 on the obniz Board and the other to number 1.

Program

<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/[email protected]/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>

What is obniz?

Here → obniz for DIY electronics

obniz is a cloud-connected IoT development board. You can program on the web browser of any smartphone or computer and the command is sent to obniz through the internet via obniz cloud. By connecting the obniz to the cloud through wifi, users can remotely control devices that are physically connected to obniz.

Thanks to this cloud based approach, you can program with Python, Javascript, or other languages you prefer and control hardware directly. You don't need to integrate firmware into the device side. Recording and analyzing data is also easy with obniz cloud service.

Want to control hardware things with your current Python or Javascript skill? Want to start IoT project but don't know where to start? Want to learn programming with languages you prefer?

obniz will help you broaden your viewpoint and develop both your SW and HW skills.

For more information, please visit our official website → Official Website

Where to get obniz board? → Amazon / Official Store