Cadre A, animation polygonale

Question

J'essaie d'animer un polygone dans A-frame, vu aussi ici Ajouter un polygone dans le cadre 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 );

L'objectif est maintenant de modifier l'opacité de la forme dans une animation. Je ne sais pas comment accéder aux attributs de la forme/du polygone dans l'animation - peut-être quelque chose comme ceci :

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

Les lignes suivantes ne sont pas claires :

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

éditer :

Voici un exemple concret : violon

Answer 1

Vous mettez mesh.material a opacity . Je crois que vous voulez spécifier l'attribut animated. Comme l'élément d'animation devrait ressembler à ceci :

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

Vos js doivent les régler en conséquence :

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

---

Maintenant, si vous voulez utiliser le composant matériel avec une géométrie personnalisée/polygone, vous devez le créer un peu différemment.

Au lieu de créer un nouveau maillage, composé de sa propre géométrie et de son propre matériau, créons la géométrie dans three.js et utilisons le composant matériau existant.
J'ai donc simplement remplacé l'ajout de la nouvelle maille par un simple :

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

Vous devriez attendre que l'objet3D soit chargé pour le faire correctement, dans mon bidule j'ai juste fait un simple timeout.

---

Maintenant, nous pouvons utiliser le composant d'animation comme prévu, et modifier l'attribut material.opacity .

Regardez-le en direct sur une boîte aquí .
Vérifiez-le en direct sur un polygone aquí .