如何在A框架中对三角形顶点进行动画动画

Question

我试图使用动画标签在a-frame中为三角形的单个顶点动画，并且有一些奇怪的结果

在一种情况下，如果我尝试按照我的期望进行动画，请更改x,y,z值这样的值...

<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>

小提琴https://jsfiddle.net/k7fbmo9k/

...我收到以下错误

'trix.buffergeometry.computeboundingsphere（）：计算半径是 南。"位置"属性可能具有NAN值。'

但是，如果我只提供这样的值。

   <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>

小提琴https://jsfiddle.net/k7fbmo9k/1/

..似乎'work'没有任何错误，但我无法控制它。

我做错了吗？

感谢您的任何建议

Answer 1

我有解决方案。使用动画组件https://www.npmjs.com/package/aframe-animation-compongent顶点将如预期的那样动画。请参阅下面的示例

 <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

尝试attribute="geometry.vertexB"。它可能不起作用以使原始属性动画，因此我们直接对几何组件进行动画。

否则，如果您足够舒适，最好以更高级的级别为顶点进行动画效果。您可以使用顶点着色器。

，也可以手动操纵顶点：

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;

和动画，在tick处理程序中进行：

AFRAME.registerComponent('animate-vertex', {
  tick: function (t) {
    // Animate vertex position until desired position using `t` to interpolate time.
  }
});