几秒钟后 A 帧淡出 gltf 模型

Question

我想知道如何使用 A 帧 (https://aframe.io) 在大约 3 秒后淡出我的 gltf 模型。我不确定我该如何做到这一点。我当前的代码如下：

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

我不确定该组件的代码是否正确，如果有另一种不涉及组件的方法来实现此淡出功能，则可以删除脚本部分。澄清一下，我希望场景中的 gltf 模型在持续 3 秒后慢慢淡出。我怎样才能做到这一点？

Answer 1

您可以试试我的 model-relative-opacity 组件和一个动画组件：

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

您可以在 this 示例中查看。

几秒钟后 A 帧淡出 gltf 模型

A-frame fade out gltf model after a few seconds

javascript

jquery

three.js

webvr

aframe