JSFiddle - React, Tailwind, and code Playground

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);
       boxGeometry.faces.splice(8, 2)

      let boxMaterial = new THREE.MeshBasicMaterial({
        color: "#FF00FF"
      })
      let mesh = new THREE.Mesh(boxGeometry, boxMaterial)
      let mesh2 = new THREE.Mesh(boxGeometry, boxMaterial)
      let mesh3 = new THREE.Mesh(boxGeometry, boxMaterial)

      mesh2.position.set(1, 0, 0)
      mesh3.position.set(-1, 0, 0)
      var group = new THREE.Group();

      group.add(mesh)
      group.add(mesh2)
      group.add(mesh3)
      thisMesh.add(group)
    }
  })

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

</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="1 3 -4" radius="0.75" add-objects cloak> </a-sphere>
  <a-sphere position="-0.25 3 -4" radius="0.25" color="green"></a-sphere>
  
  <a-camera position="-1.2 1.6 0"></a-camera>

</a-scene>