JSFiddle - React, Tailwind, and code Playground

by Anathapindika

HTML

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

<script>
  AFRAME.registerComponent('heart', {
    init: function() {
      var x = 0,
        y = 0;

      var heartShape = new THREE.Shape();

      heartShape.moveTo(x + 5, y + 5);
      heartShape.bezierCurveTo(x + 5, y + 5, x + 4, y, x, y);
      heartShape.bezierCurveTo(x - 6, y, x - 6, y + 7, x - 6, y + 7);
      heartShape.bezierCurveTo(x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19);
      heartShape.bezierCurveTo(x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7);
      heartShape.bezierCurveTo(x + 16, y + 7, x + 16, y, x + 10, y);
      heartShape.bezierCurveTo(x + 7, y, x + 5, y + 5, x + 5, y + 5);
      console.log("scene");

      var geometry = new THREE.ShapeGeometry(heartShape);
      var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
      });
      var mesh = new THREE.Mesh(geometry, material);
      let scene = document.querySelector('a-scene').object3D;
      console.log(scene);
      scene.add(mesh);
    }
  });
  AFRAME.registerComponent('foo', {
    init: function() {
      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);
      var material = new THREE.MeshBasicMaterial({
        color: 0x00ff00
      });
      var mesh = new THREE.Mesh(geometry, material);
      this.el.object3D.add(mesh);
      let opacityAnimation = document.createElement('a-animation');
      opacityAnimation.setAttribute('attribute', 'material.opacity');
      opacityAnimation.setAttribute('to', '0');
     ...