在 A 帧中淡出整个屏幕

Question

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

谢谢

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 元素进行动画处理。更难的解决方案是 post-processing.

Answer 2

我能够使用相机周围的不透明几何体来做到这一点，就像 Piotr 的回答一样。我使用了一个盒子而不是一个球体，material="side:back".

但是我必须对解决方案进行一些调整才能在我的情况下可行（具体情况是我在我的场景中使用了一堆半透明对象，并且 A-Frame/THREE.js 倾向于与多个半透明层斗争）。

我发现存在一个不透明度为 0 的附加层会导致场景中的其他半透明层出现一些闪烁和其他视觉效果。解决此类问题的常用技巧是在场景中设置 renderer="sortObjects: true" ，但即使使用此设置我仍然会出现闪烁。我采用的解决方案是让球体不可见（而不是仅仅 opacity=0），直到它需要淡出，然后我在淡入后再次使它可见。
这导致了进一步的问题，使对象可见并立即启动不透明度属性的动画不起作用（它只是捕捉到黑色而没有动画）。我发现在将对象设置为可见和开始淡入淡出之间留出 50 毫秒的间隙足以获得平滑的淡入淡出效果。
另一个观察结果（我没有想出解决方案）是这并没有让我陷入一片漆黑。镜头正前方有一点余光。

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

在 A 帧中淡出整个屏幕

Fade out whole screen in A-Frame

javascript

aframe