几秒钟后 A 帧淡出 gltf 模型答案

【问题标题】：A-frame fade out gltf model after a few seconds几秒钟后 A 帧淡出 gltf 模型
【发布时间】：2021-08-30 16:34:18
【问题描述】：

我想知道如何在大约 3 秒后使用 A-frame (https://aframe.io) 淡出我的 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 秒后慢慢淡出。我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery three.js aframe webvr

【解决方案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 示例中查看。

【讨论】：