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

Question

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

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

Answer 1

内置的material组件主要与原语的作品,所以material="opacity: 0.5",同样opacity="0.5"不会在这里工作.您需要使用自定义组件修改模型创建的THREE.js材质.例:

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上的文档并编写组件.

Answer 2

对我来说，材质是全白色的，所以我必须更改 Don 的组件以支持数字：

AFRAME.registerComponent("model-opacity", {
  schema: {
    opacity: { type: "number", default: 0.5 }
  },
  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) {
        console.log(node);
        node.material.opacity = data.opacity;
        node.material.transparent = data.opacity < 1.0;
        node.material.needsUpdate = true;
      }
    });
  }
});