Help on setting opacity and delay

🧑‍💻 Technical Support
1

Hi, looking for some help. I would like to set the opacity of a glb model at start to be 0 and then after a certain delay fade the model in. I found an example of how to fade in the model over time but not how to initially set the opacity to zero and how to accomplish the delay.

2

Hi @Glenn_Jones you could probably write a component to do this. Something like:

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

Then you could probably trigger an animation on this, like this:

this.model.setAttribute('animation', {
    property: 'model-opacity',
    from: 0.001,
    to: 1,
    dur: 1000,
    delay: 100, // You can add a delay here or trigger it with a setTimeout somewhere else
});

Hope this helps :slight_smile:

1 Like
3

Thank you for your post that was helpful. I ended up using two setTimeouts - one to set the opacity to zero right away and one to set the fade in after 9 seconds.

4

Hi am using this script for the fades. A-Frame: animate opacity | Evan Carlson | 8th Wall
When I try to add a delay which AFRAME animate is supposed to support it just ignores it.

animation="property: model-fade.opacity;
      from: 1; to: 0; dur: 2500; delay: 4500">

Suggestions?

Update: if the delay value is 159 or less, the fade happen as if the delay is not there. If the delay value is 160 or higher the fade does not happen at all.

Update2: if I try to it this way, I cannot get the delay over 200 or the fade does not work at all.

setTimeout(() => {
  model1.setAttribute('animation', {
    property: 'model-fade.opacity',
    from: 1,
    to: 0,
    dur: 2000,
  })
}, 200)