在 A 形框架中淡出整个屏幕

Question

我想让屏幕淡出为黑色，然后以编程方式淡出。我还找不到一个聪明的解决方案。我知道我可以使用材质的不透明度淡入和淡出实体，但是您可以将其应用于整个屏幕或相机吗？

Answer 1

我会采用一种简单的方法 - 更改相机周围黑色球体的不透明度：

<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>

<script>

  // declare the component

  AFRAME.registerComponent("foo", {

    init: function() {

      // grab the "fading sphere"

      var fadingEl = document.querySelector("#lord-fader")

      // when clicked - emit the defined "startEvent"

      this.el.addEventListener("click", e => fadingEl.emit("animate"))

    }

  })

</script>

<a-scene cursor="rayOrigin: mouse" raycaster="objects: .interactable">

  <a-text position="-0.75 2.5 -4.5" value="click to animate" color="black"></a-text>

  <a-sphere class="interactable" position="0 1.25 -5" radius="1.25" color="#EF2D5E" foo></a-sphere>

  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>

  <a-sky color="#ECECEC"></a-sky>

  <a-camera>

    <!-- our fake-fade sphere -->

    <a-sphere id="lord-fader" radius="0.05" 

              material="shader:flat; color: black; opacity: 0.0; side: double " 

              animation="property: material.opacity; from: 0.0; to: 1.0 dur: 500; dir: alternate; loop: 2; startEvents: animate"></a-sphere>

  </a-camera>

</a-scene>

一个更简单的解决方案可能是对覆盖在 a 框架场景上的 HTML 元素进行动画处理。更困难的解决方案是后处理。

Answer 2

我能够使用相机周围的不透明几何体来做到这一点，就像 Piotr 的答案一样。我使用了一个盒子而不是一个球体，材质为“side:back”。

然而，我必须做出一些调整，以使解决方案在我的情况下可行（具体情况是，我在场景中使用了一堆半透明对象，而 A-Frame/THREE.js 往往会与多个半透明对象作斗争。透明层）。

• 我发现不透明度 = 0 的附加图层的存在导致场景中其他半透明图层出现一些闪烁和其他视觉效果。解决此类问题的常用技巧是在场景中设置 renderer="sortObjects: true" ，但即使使用此设置，我仍然会闪烁。我采用的解决方案是让球体不可见（而不仅仅是不透明度=0），直到需要淡出时为止，然后在淡入后使其再次可见。

• 这导致了进一步的问题，使对象可见并立即在不透明度属性上启动动画不起作用（它只是捕捉到黑色而没有动画）。我发现在将对象设置为可见和开始淡入淡出之间留出 50 毫秒的间隙就足以获得平滑的淡入淡出效果。

• 另一项观察（我没有提出解决方案）是，这并没有让我陷入一片漆黑。相机正前方有一点残留的光芒。

考虑到上述复杂性，在我看来基于相机的解决方案会更好，但我还没有找到一种方法来做到这一点。