A-フレーム、ポリゴンアニメーション

Question

私は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); 

---

、カスタム/ポリゴンジオメトリと材料成分を使用したい場合は、少し違うように作成する必要があります。

独自のジオメトリとマテリアルで構成される新しいメッシュを作成する代わりに、ジオメトリをthree.jsで作成し、既存のマテリアルコンポーネントを使用できます。
だから私は、単にシンプルで新しいメッシュを追加するに置き換え：

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

object3Dはそれを正しく行うためにロードされるまで、あなたは待つ必要があり、私のバイオリンに私は単純なタイムアウトを作りました。

---

アニメーションコンポーネントを意図どおりに使用して、 material.opacityを変更することができます。

ボックスにチェックを入れてくださいhere。
ポリゴンでライブを確認するhere