TA貢獻1802條經驗 獲得超6個贊
我會采用一種簡單的方法 - 更改相機周圍黑色球體的不透明度：
<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 元素進行動畫處理。更困難的解決方案是后處理。
TA貢獻1934條經驗 獲得超2個贊
我能夠使用相機周圍的不透明幾何體來做到這一點，就像 Piotr 的答案一樣。我使用了一個盒子而不是一個球體，材質為“side:back”。
然而，我必須做出一些調整，以使解決方案在我的情況下可行（具體情況是，我在場景中使用了一堆半透明對象，而 A-Frame/THREE.js 往往會與多個半透明對象作斗爭。透明層）。
我發現不透明度 = 0 的附加圖層的存在導致場景中其他半透明圖層出現一些閃爍和其他視覺效果。解決此類問題的常用技巧是在場景中設置 renderer="sortObjects: true" ，但即使使用此設置，我仍然會閃爍。我采用的解決方案是讓球體不可見（而不僅僅是不透明度=0），直到需要淡出時為止，然后在淡入后使其再次可見。
這導致了進一步的問題，使對象可見并立即在不透明度屬性上啟動動畫不起作用（它只是捕捉到黑色而沒有動畫）。我發現在將對象設置為可見和開始淡入淡出之間留出 50 毫秒的間隙就足以獲得平滑的淡入淡出效果。
另一項觀察（我沒有提出解決方案）是，這并沒有讓我陷入一片漆黑。相機正前方有一點殘留的光芒。
考慮到上述復雜性，在我看來基于相機的解決方案會更好，但我還沒有找到一種方法來做到這一點。
舉報