aframe - Aframe 中的 Alpha 动画用于对象模型

Question

我有一个带有 obj 和 mtl 文件的 3d 对象，该文件在 Aframe 中显示。我想在它上面应用动画，逐渐改变它的 Alpha 值以获得淡出效果。

我浏览了 AFrame 文档。但找不到与 3d 对象 alpha 动画相关的任何内容。

Answer 1

内置material组件主要使用基元，所以 material="opacity: 0.5"和类似 opacity="0.5"不会在这里工作。您需要使用自定义组件修改模型创建的 THREE.js Material 。例子:

AFRAME.registerComponent('model-opacity', {
  schema: {default: 1.0},
  init: function () {
    this.el.addEventListener('model-loaded', this.update.bind(this));
  },
  update: function () {
    var mesh = this.el.getObject3D('mesh');
    var data = this.data;
    if (!mesh) { return; }
    mesh.traverse(function (node) {
      if (node.isMesh) {
        node.material.opacity = data;
        node.material.transparent = data < 1.0;
        node.material.needsUpdate = true;
      }
    });
  }
});

然后，您可以使用该组件并为其设置动画，如下所示:

<a-entity obj-model="obj: model.obj; mtl: model.mtl;" model-opacity="1">
  <a-animation attribute="model-opacity"
               dur="10000"
               from="1"
               to="0"
               repeat="indefinite"></a-animation>
</a-entity>

有关其工作原理的更多信息，请参阅 THREE.Material 上的文档。和 writing a component .