A帧、多边形动画

Question

我正在尝试为 A 帧中的多边形制作动画，也可在此处查看：

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

现在的目标是改变动画中形状的不透明度。我不知道如何访问动画中的 shape/polygon 属性 - 可能是这样的：

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

现在，如果您想使用具有 custom/polygon 几何体的 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.

A帧、多边形动画

A-frame, Polygon animation

animation

polygon

aframe