How to animate triangle vertices in a-frame - aframe

Question

I am trying to animate an individual vertex of a triangle primitive in a-frame using the animation tag and am having some strange results
In one case, If I try to animate as I would expect to, changing the x,y,z values like so...
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double">
<a-animation
attribute="vertex-b"
from="-1 1 -10"
to="-1 5 -10"
dur="4000"
>
</a-animation>
</a-triangle>
Fiddle https://jsfiddle.net/k7fbmo9k/
...I get the following error
'THREE.BufferGeometry.computeBoundingSphere(): Computed radius is
NaN. The "position" attribute is likely to have NaN values.'
However, If I only offer a single value like so..
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double">
<a-animation
attribute="vertex-b"
from="1"
to="5"
dur="4000"
>
</a-animation>
</a-triangle>
Fiddle https://jsfiddle.net/k7fbmo9k/1/
..it seems to 'work' as in no errors and there is animation but I have no control over it.
Am I doing something wrong?
Thanks for any advice as ever

Answer 1

I have a solution. Using the animation component https://www.npmjs.com/package/aframe-animation-component
the vertices will animate as expected. See example below
<a-triangle
vertex-a="-1 1 -5"
vertex-b="-1 1 -10"
vertex-c="4 1 -10"
color="blue"
material="side: double"
animation="property: vertex-b; to: -1 5 -10; dur: 1000">
</a-triangle>

Answer 2

Try attribute="geometry.vertexB". It might not work to animate the primitive attributes, so we animate the geometry component directly.
Otherwise, if you are comfortable enough, it is better to animate vertices at a more advanced level for performance. You can use a vertex shader.
Or you can manipulate the vertices manually:
var geometry = triangleEl.getObject3D('mesh').geometry;
geometry.attributes.position[0] += 0.1;
geometry.attributes.position[1] += 0.1;
geometry.attributes.position[2] += 0.1;
geometry.attributes.position.needsUpdate = true;
And to animate, do it in a tick handler:
AFRAME.registerComponent('animate-vertex', {
tick: function (t) {
// Animate vertex position until desired position using `t` to interpolate time.
}
});