A-frame, Polygon animation

Question

I'm trying to animate a polygon in A-frame, seen also here 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 );

The goal now is to change the opacity of the shape in an animation. I don't know how to access the shape/polygon attributes within the animation - maybe something like this:

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

following lines are not clear:

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

edit:

here is a live-example: fiddle

Piotr Adam Milewski Piotr Adam Milewski · Accepted Answer · 2017-11-07T22:18:32

You set mesh.material to opacity. I believe You want to specify the animated attribute. As the animation element should look like this:

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

Your js must be setting those accordingly:

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

Instead of creating a new mesh, consisting of its own geometry, and material, lets make the geometry in three.js, and use the existing material component.
So i simply replaced adding the new mesh with a simple:

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

You should wait till the object3D is loaded to do it properly, in my fiddle i just made a simple timeout.

material.opacity

Check it live on a box here.
Check it live on a polygon here.

A-frame, Polygon animation

1 Answers