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/

...我收到以下错误

＆＃39; THREE.BufferGeometry.computeBoundingSphere（）：计算半径为 NaN的。＆＃34;位置＆＃34;属性可能具有NaN值。＆＃39;

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

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

..它似乎＆＃39; work＆＃39; ，因为没有错误，并且有动画，但我无法控制它。

我做错了吗？

感谢任何建议

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>

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

2 个答案: