JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<script src="https://aframe.io/releases/0.9.1/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('add-objects', {
    init: function() {
      let thisMesh = this.el.getObject3D('mesh')
      let boxGeometry = new THREE.BoxGeometry(1, 1, 1);
      let boxMaterial = new THREE.MeshBasicMaterial({
        color: "#FF00FF"
      })
      let mesh = new THREE.Mesh(boxGeometry, boxMaterial)
      thisMesh.add(mesh)
    }
  })

  AFRAME.registerComponent('cloak-timer', {
    init: function() {
      let mesh = this.el.getObject3D('mesh')
      let flip = false
      setInterval(e => {
        if (mesh !== undefined) {
          mesh.traverse(function(node) {
            if (node.isMesh) {
              if (node.material) {
                node.material.colorWrite = flip
                node.material.needsUpdate = true;
              }
            }
          });
        }
        flip = !flip
      }, 1000)
    }
  })

</script>
<a-scene>
  <a-sky color="#ECECEC"></a-sky>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-sphere position="0 3 -4" radius="0.25" color="green"></a-sphere>
  <a-sphere position="0 3 -4" radius="0.75" add-objects cloak-timer> </a-sphere>

</a-scene>