Aframe中针对对象模型的Alpha动画 [英] Alpha Animation in Aframe for a-object-model

问题描述

我有一个3d对象，其obj和mtl文件在Aframe中使用显示。我想在其上应用动画，该动画会逐渐更改其Alpha值以实现淡出效果。

I have one 3d object with its obj and mtl file which is displayed using in Aframe. I want to apply animation on it which change its Alpha value gradually for Fade out effect.

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

I went through AFrame doc. but couldn't find anything related to 3d object alpha animation.

推荐答案

内置的材料组件主要与基元一起使用，因此 material = opacity：0.5 和类似的 opacity = 0.5 在这里不起作用。您需要使用自定义组件修改由模型创建的THREE.js材料。示例：

The built-in material component primarily works with primitives, so material="opacity: 0.5" and similarly opacity="0.5" will not work here. You'll need to modify the THREE.js materials created by your model, using a custom component. Example:

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;
      }
    });
  }
});

然后可以使用和动画化这样的组件：

You can then use, and animate, the component like this:

<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 和编写组件。

For more on how this works, see the docs on THREE.Material and writing a component.

这篇关于Aframe中针对对象模型的Alpha动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！