animation - A帧、多边形动画

Question

我正在尝试为 A 帧中的多边形制作动画，也可以在这里看到 Add polygon in A-frame :

// Create new shape out of the points:
var shape = new THREE.Shape( vector2List );
// Create geometry out of the shape
var geometry = new THREE.ShapeGeometry( shape );
// Give it a basic material
var material = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 1} );

// Create a mesh using our geometry and material
var mesh = new THREE.Mesh( geometry, material ) ;
// add it to the entity:
this.el.object3D.add( mesh );

现在的目标是改变动画中形状的不透明度。我不知道如何访问动画中的形状/多边形属性 - 也许是这样的:

// animation
let opacityAnimation = document.createElement( 'a-animation' );

以下几行不清楚:

opacityAnimation.setAttribute( 'mesh.material', 'opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );

编辑:

这是一个活生生的例子:fiddle

Answer 1

您将 mesh.material 设置为 opacity。我相信你想指定动画属性。因为动画元素应该是这样的:

<a-animation attribute="material.opacity"
             to = "0"
             dur = "5000">
</a-animation>

您的 js 必须进行相应的设置:

// animation
let opacityAnimation = document.createElement( 'a-animation' );
opacityAnimation.setAttribute( 'attribute', 'material.opacity' );
opacityAnimation.setAttribute( 'to', '0' );
opacityAnimation.setAttribute( 'dur', '5000' );
this.el.appendChild( opacityAnimation );

---

现在，如果您想将 Material 组件与自定义/多边形几何体一起使用，您需要以不同的方式创建它。

与其创建由自己的几何体和 Material 组成的新网格，不如在 three.js 中创建几何体，并使用现有的 Material 组件。
所以我简单地用一个简单的方法替换了添加新网格:

var myShape = new THREE.Shape(points);
var geometry = new THREE.ShapeGeometry(myShape);
this.el.getObject3D('mesh').geometry = geometry;

您应该等到 object3D 加载完毕才能正确执行此操作，在我的 fiddle 中，我只是做了一个简单的超时。

---

现在我们可以按预期使用动画组件，并更改 material.opacity。

在盒子上实时检查 here .
在多边形上检查它 here .