Alpha Animation in Aframe for a-object-model

Question

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.

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

score 11 · Accepted Answer · edited May 11 '17 at 14:43

11

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>

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

edited May 11 '17 at 14:43

chikka.anddev

9,569
7
38
46

answered May 11 '17 at 14:12

Don McCurdy

10,975
2
37
75

it is not working for another 3d object. does it do with some material? – chikka.anddev May 16 '17 at 14:12
If you can `console.log(node.material)` that may be helpful. There are different types of THREE._____Material objects, each with different settings in the three.js docs. But most should support opacity I think, excluding maybe ShaderMaterial. – Don McCurdy May 16 '17 at 14:14
its multimaterial type. i think thats issue and its not providing any way to get it. is there any workaround? – chikka.anddev May 17 '17 at 09:13
1

@elopio Yes, except with glTF 1.0 models that contain custom shaders, as opposed to the "common materials" extension. There should be no issue with glTF 2.0. – Don McCurdy Sep 07 '17 at 19:12

score 5 · Answer 2 · answered Mar 12 '20 at 15:38

For me, the material was all white, so I had to change the component by Don to support a number:

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

This worked great. Do you know how I can animate this? – Jason Small Jul 13 '21 at 23:42 — Jason Small, Jul 13 '21 at 23:42
Like this, IIRC: ` ` @Jason Small – dirkk0 Jul 14 '21 at 06:43 — dirkk0, Jul 14 '21 at 06:43

score 0 · Answer 3 · answered Feb 17 '22 at 05:14

I had to modify the above examples as mine had multiple materials, so I had to use forEach and adjust for all of them:

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.forEach( (mtl) =>{
            mtl.opacity = data.opacity;
            mtl.transparent = data.opacity < 1.0;
            mtl.needsUpdate = true;
        })
      }
    });
  }
});

Alpha Animation in Aframe for a-object-model

3 Answers3

Linked