javascript - 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() )。

分步过程:

• 在 Canvas 上放置一个 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 )并且看起来非常漂亮。