How to animate triangle vertices in a-frame

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>