JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.0/aframe-master.min.js"></script>
<script src="https://web.sfc.wide.ad.jp/~aky/gc-vr/polyfill/polyfill-mod.js"></script>
<body>
  <a-scene>
    <a-assets>
      <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" crossorigin="anonymous">
    </a-assets>

    <a-sky id="sky" src="#city">
    </a-sky>

    <a-box id="box" color="yellow" position="2 2 -7" stare-to-turn-on>
      <a-animation attribute="rotation" to="0 360 360" dur="2000" repeat="indefinite" easing="linear"></a-animation>
      <a-animation attribute="scale" to="1.2 1.2 1.2" repeat="1" dur="150" direction="alternate" begin="click"></a-animation>
    </a-box>

    <a-box id="box" color="gray" position="-2 2 -7" stare-to-turn-off>
      <a-animation attribute="scale" to="1.2 1.2 1.2" repeat="1" dur="150" direction="alternate" begin="click"></a-animation>
    </a-box>

    <a-camera>
      <a-cursor></a-cursor>
    </a-camera>
  </a-scene>
</body>

JavaScript

(() => {
  'use strict'

	navigator.setPolyfillServerURL('ws://192.168.2.2:33330/')

  let port
  navigator.requestGPIOAccess()
    .then(gpioAccess => {
      port = gpioAccess.ports.get(26)
      return port.export('out')
    })
    .catch(console.error.bind(this))

  function changeLight(isOn) {
    port.write(isOn ? 1 : 0)
    console.info(isOn ? 'turning on' : 'turning off')
  }

  AFRAME.registerComponent('stare-to-turn-on', {
    init() {
      this.el.addEventListener('click', () => changeLight(true))
    }
  })

  AFRAME.registerComponent('stare-to-turn-off', {
    init() {
      this.el.addEventListener('click', () => changeLight(false))
    }
  })
})()