A-frame, Polygon animation - animation

Question

I'm trying to animate a polygon in A-frame, seen also here Add polygon in A-frame:
// Create new shape out of the points:
var shape = new THREE.Shape( vector2List );
// Create geometry out of the shape
var geometry = new THREE.ShapeGeometry( shape );
// Give it a basic material
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 1} );
// 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 );
The goal now is to change the opacity of the shape in an animation. I don't know how to access the shape/polygon attributes within the animation - maybe something like this:
// animation
let opacityAnimation = document.createElement( 'a-animation' );
following lines are not clear:
opacityAnimation.setAttribute( 'mesh.material', 'opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );
edit:
here is a live-example: fiddle

Answer 1

You set mesh.material to opacity. I believe You want to specify the animated attribute. As the animation element should look like this:
<a-animation attribute="material.opacity"
to = "0"
dur = "5000">
</a-animation>
Your js must be setting those accordingly:
// animation
let opacityAnimation = document.createElement( 'a-animation' );
opacityAnimation.setAttribute( 'attribute', 'material.opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );
Now, if you want to use the material component with a custom/polygon geometry, You need to create it a bit differently.
Instead of creating a new mesh, consisting of its own geometry, and material, lets make the geometry in three.js, and use the existing material component.
So i simply replaced adding the new mesh with a simple:
var myShape = new THREE.Shape(points);
var geometry = new THREE.ShapeGeometry(myShape);
this.el.getObject3D('mesh').geometry = geometry;
You should wait till the object3D is loaded to do it properly, in my fiddle i just made a simple timeout.
Now we can use the animation component as intended, and change the material.opacity.
Check it live on a box here.
Check it live on a polygon here.