aframewebvrgear-vr

Alpha Animation in Aframe for a-object-model


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.


Solution

  • 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.