如何为一帧中的三角形顶点设置动画

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>

Fiddle https://jsfiddle.net/k7fbmo9k/

...我收到以下错误

'THREE.BufferGeometry.computeBoundingSphere(): Computed radius is NaN. The "position" attribute is likely to have NaN values.'

但是，如果我像这样只提供一个值..

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

..它似乎 'work' 没有错误并且有动画但我无法控制它。

我是不是做错了什么？

一如既往地感谢您的建议

Answer 1

尝试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;

要制作动画，请在滴答处理程序中执行：

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

Answer 2

我有办法。使用动画组件 https://www.npmjs.com/package/aframe-animation-component 顶点将按预期进行动画处理。请参阅下面的示例

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

如何为一帧中的三角形顶点设置动画

How to animate triangle vertices in a-frame

webvr

aframe