I am wondering how I can use A-frame (https://aframe.io) to fade out my gltf model after around 3 seconds. I'm not sure exactly how I'd be able to do this. My current code is below:
<script>
AFRAME.registerComponent('fadeout', {
init: function(){
//code for the fade out
}
})
</script>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
<a-gltf-model fadeout id="one" src="https://cdn.glitch.com/2556b706-79db-4661-ab72-d86cfd5b5649%2Fscene.glb?v=1622850633562" position="-0 6 -1" scale="0.01 0.01 0.01"></a-gltf-model>
<a-plane width="100" height="100" position=" 0.00 0.00 0.00" rotation="-90 0 0" color="royalblue"></a-plane>
<a-sky src="https://cdn.glitch.com/aa594ec7-532d-4c71-a8fb-88e78dd013a1%2Fwhite-blue-gradient-linear-1920x1080-c2-ffffff-00bfff-a-270-f-14.svg?v=1623361777929"></a-sky>
</a-scene>
I'm not sure exactly if the code for the component is correct and if there is another way of doing this fade out feature that doesnt involve a component, the script part can just be removed. Just clarifying, I would like the gltf model in my scene to fade out slowly after a duration of 3 seconds. How can I achieve this?
You can try my model-relative-opacity component along with an animation component:
<a-entity scale="0.0025 0.0025 0.0025" position="1.5 1 -2"
gltf-model="#model" model-relative-opacity
animation='property: model-relative-opacity.opacityFactor;
from: 1; to: 0; dur: 2500; startEvents: model-loaded'>
</a-entity>
You can check it out in this example.