JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>


<button onclick="startThis();">start</button>
    <button onclick="endThis();">stop</button>
    <a-scene>
      <a-camera wasd-controls position="0 -1 3"></a-camera>

      <a-ring color="red" opacity="0" visible="true"
        			geometry="radiusInner:0.45; radiusOuter:0.55">
          <a-animation class="aaa" begin="select-widget" end="unselect-widget" attribute="opacity" from="0" to="0.6" dur="600"  repeat="indefinite" direction="alternate" ></a-animation>
          <a-animation class="aaa" begin="select-widget" end="unselect-widget" attribute="radiusInner" from="0.45" to="0.55" dur="600"  repeat="indefinite" direction="alternate"></a-animation>
          <a-animation class="aaa" begin="select-widget" end="unselect-widget" attribute="geometry.radiusOuter" from="0.55" to="0.65" dur="600"  repeat="indefinite" direction="alternate"></a-animation>
      </a-ring>


    </a-scene>

JavaScript

startThis = function () {
      document.querySelector('.aaa').emit('select-widget');
    }

    endThis = function () {
      document.querySelector('.aaa').emit('unselect-widget');
    }