JSFiddle - React, Tailwind, and code Playground

HTML

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

<script>

  AFRAME.registerComponent('foo', {
  schema: {
  opacity:{default: 0.5}
  },
    init: function() {
    		this.opacity = this.data.opacity;

      var x = 0,
        y = 0;
      let points = [];
      points.push(new THREE.Vector2(0, 0));
      points.push(new THREE.Vector2(3, 0));
      points.push(new THREE.Vector2(5, 2));
      points.push(new THREE.Vector2(5, 5));
      points.push(new THREE.Vector2(5, 5));

      points.push(new THREE.Vector2(2, 7));


      for (var i = 0; i < points.length; i++) {
        points[i].multiplyScalar(0.25);
      }
      var heartShape = new THREE.Shape(points);



      var geometry = new THREE.ShapeGeometry(heartShape);

      setTimeout(()=>{
            console.log(this.el.getObject3D('mesh').geometry);
      this.el.getObject3D('mesh').geometry = geometry;
      },1000)


    }
  });

</script>


<body>
  <a-scene>
    <!-- pentagon -->
    <a-entity position="0 0 -2"  foo material="color:green">
     <a-animation attribute="material.opacity"
                 to="0"
                 dur="5000">
     </a-animation>
    </a-entity>
  </a-scene>
</body>