JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<html>

  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>

  <body>
    <a-scene>

      <a-entity id="ctlR" laser-controls raycaster></a-entity>
      <a-entity id="ctlL" laser-controls="left" raycaster>
        <a-entity oculus-touch-controls x-button-listener></a-entity>


        <a-entity camera look-controls position="0 1.6 0">
          <a-text id="txt" value="test" position="0 0 -1" scale="0.4 0.4 0.4" align="center" color="#000000"></a-text>
        </a-entity>



        <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
        <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="blue"></a-sky>
    </a-scene>
  </body>

</html>

JavaScript

const ctlL = document.getElementById("ctlL");
    const ctlR = document.getElementById("ctlR");
    const txt = document.getElementById("txt");

    function log(v) {
      txt.setAttribute("value", v);
    }


    ctlL.addEventListener('xbuttondown', function(event) {
      log("x button pressed!")
    });
    ctlR.addEventListener('abuttondown', function(event) {
      log("a button pressed!")
      showSlides(slideIndex -= 1)
    });
    ctlR.addEventListener('bbuttondown', function(event) {
      log("b button pressed!")
      showSlides(slideIndex += 1)
    });