言語切り替え

ボタンを押して3Dオブジェクトを回転させる

ボタンを押した時にブラウザ上の3Dオブジェクトが回転するようにします。

用意するもの

接続

ボタンにある2つのピンをobniz Boardにつなぎます。プラスとマイナスはありません。例えば片方をobniz Boardの0番に。もう片方を1番につないだ場合は以下のようにプログラム上でwireします

 

プログラム

<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">
  <link rel="stylesheet" href="/css/starter-sample.css">
  <script src="https://obniz.io/js/jquery-3.2.1.min.js"></script>
  <script src="https://unpkg.com/obniz@3.3.0/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("2639-5252");
  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>

うごかす

関連記事