Three.js：如何做一个淡入淡出的场景过渡？

Question

我似乎找不到在 Three.js 中为当前渲染场景之间的切换设置动画的标准方法。我已将实现简化如下：

var sceneIndex;
var currentScene;

switch (sceneIndex) {
   case 1:
          currentScene = scene;
          break;
   case 2:
          currentScene = scene1;
          break;
}

当我想切换场景时：

if (clickEvent) {
   sceneIndex = 2
} 

场景渲染如下：

renderer.render(currentScene, camera); //I use only one camera

现在，这会突然中断到下一个场景，这对用户不友好。我想要的是当变量currentScene 改变时一个简单的淡入黑色动画。你建议用什么方法来实现这一目标？谢谢。

Answer 1

您可以在不需要 Three.js 的情况下做到这一点。只需放置一个div 覆盖canvas 和animate 即可淡入黑屏并返回。您等待动画花费的一半时间并在该点更改屏幕（使用setTimeout()）。

分步流程：

• 在你的画布上放置一个 div（你应该使用absolute positioning）
• 添加一个包含动画的 CSS 类（参见下面的示例）
• 设置动画的关键帧（参见下面的示例）
• 然后通过以下方式触发动画：
  1. 从元素中删除类
  2. 作用于元素（例如div.offsetWidth）
  3. 将类添加到元素中

当元素具有类时，动画将触发。然后，它将一直播放，直到完成或元素丢失类，无论先发生什么。

这是一个例子：

var color = "#0000FF";

function changeScene() {
    // Trigger animation
    var div = document.getElementById("curtain");
    div.classList.remove("screen-change");
    div.offsetWidth;
    div.classList.add("screen-change");
   
    // Trigger scene change
    setTimeout(function() {
        // Your real code should go here. I've added something
        // just to demonstrate the change
        color = color == "#0000FF"? "#FF0000" : "#0000FF";
        document.getElementById("render").style.background = color;
    }, 1000);
};

div {
    width: 160px;
    height: 90px;
}

#render {
    background: #0000FF;
}
#curtain {
    background: black;
    opacity: 0;
}

.screen-change {
    animation-name: screen-change;
    animation-duration: 2s;
}

@keyframes screen-change {
    0% {opacity: 0;}
    30% {opacity: 1;}
    /* Waiting time */
    70% {opacity: 1;}
    100% {opacity: 0;}
}

<div id="render"><div id="curtain"></div></div>

<button id="scene-changer" onclick="changeScene()">Change scene</button>

这个解决方案非常便宜（它使用 CSS 动画，are supported by most major browsers）而且看起来非常漂亮。