Add polygon in A-frame

Question

Is there a way to add polygon in A-frame? Kinda like:

<         


        

Answer 1

There used to be a polygon-component, but it doesn't work with 0.5.0 or 0.6.0. So you have to make your own in three.js, by creating a component which adds a mesh to your entity:

let points = []; //vertices of Your shape
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 ) );
// scaling, not necessary:
for( var i = 0; i < points.length; i ++ ) {
    points[ i ].multiplyScalar( 0.25 );
}
// Create new shape out of the points:
var heartShape = new THREE.Shape(points);
// Create geometry out of the shape
var geometry = new THREE.ShapeGeometry( heartShape );
// Give it a basic material
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
// Create a mesh using our geometry and material
var mesh = new THREE.Mesh( geometry, material ) ;
// add it to the entity:
this.el.object3D.add( mesh );

Working fiddle here, it's the 'foo' component.

UPDATE
You can make the shape to a 3D object by extruding it along the z-axis, using:

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

You can find more information about extrusion params here. The amount is the 'thickness' of the object.
Working fiddle here.