Question

我试图在A帧中为多边形设置动画，这里也可以看到Add polygon in A-frame：

environment

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

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

修改

这是一个实例：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 );

<小时/> 现在，如果要将材质组件与自定义/多边形几何体一起使用，则需要以不同的方式创建它。

不是创建由其自己的几何体和材质组成的新网格，而是让几何体形成三个.js，并使用现有的材质组件。
所以我简单地用简单的替换添加新网格：

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

你应该等到object3D被加载才能正确地完成它，在我的小提琴中我只是做了一个简单的超时。

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

在方框here上查看在多边形here上查看它。

A帧，多边形动画

1 个答案: