JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

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

      <script>
        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(2, 7));


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


            var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {
              amount: 0.01,
              bevelEnabled: false
            });

            // Geometry doesn't do much on its own, we need to create a Mesh from it
            var extrudedMesh = new THREE.Mesh(extrudedGeometry, new THREE.MeshPhongMaterial({
              color: 0xff0000
            }));
            this.el.object3D.add(extrudedMesh);

            var geometry = new THREE.ShapeGeometry(shape);
            var material = new THREE.MeshBasicMaterial({
              color: 0x00ff00
            });
            var mesh = new THREE.Mesh(geometry, material);
            this.el.object3D.add(mesh);
          }
        });

      </script>


      <body>
        <a-scene>
          <!-- pentagon -->
          <a-entity position="0 2 -7" foo></a-entity>
        </a-scene>
      </body>