JSFiddle - React, Tailwind, and code Playground

by dirkk0

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/aframe/0.5.0/aframe.js"></script>
  <a-scene>
    <a-entity camera position="2 0 3" look-controls wasd-controls>
      <a-entity cursor="fuse: true; fuseTimeout: 1000"
                position="0 0 -1"
                geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
                material="color: black; shader: flat">
        <a-animation begin="click" easing="ease-in" attribute="scale"
                     fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
        <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
                     fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
      </a-entity>
    </a-entity>



    <a-entity id="scene1">

      <a-sky color="#ffffff"></a-sky>
      <a-box color="red" onclick="setScene2();"> </a-box>

      <a-light id="ambient1" type="ambient" color="#4f6487" >
        <a-animation attribute="intensity" begin="aaa" from="0" to="1" delay="100" dur="1000" fill="both"></a-animation>
      </a-light>
    </a-entity>

    <a-entity id="scene2" visible="false">

      <a-sky color="#aaaaaa"></a-sky>

      <a-box color="green" position="0 2 -5"> </a-box>
      <a-box color="yellow" position="5 0 -5" onclick="setScene1()"> </a-box>
      <a-box color="blue" position="0 0 -3"> </a-box>

      <a-light id="ambient2" type="ambient" color="#FFFFFF" >
        <a-animation attribute="intensity" begin="aaa" from="0" to="1" delay="100" dur="1000" fill="both"></a-animation>
      </a-light>

    </a-entity>

  </a-scene>

JavaScript

// example via https://github.com/aframevr/aframe/issues/1023

  function setScene1() {
    document.getElementById('scene2').setAttribute('visible', 'false');
    document.getElementById('scene1').setAttribute('visible', 'true');
  };
  function setScene2() {
    document.getElementById('scene1').setAttribute('visible', 'false');
    document.getElementById('scene2').setAttribute('visible', 'true');
  };