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. 将类添加到元素

当元素具有类时，将触发动画。然后，它将一直播放，直到它结束或元素丢失，无论什么是第一个。

以下是一个例子：

＆＃13;

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);
};

＆＃13;

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;}
}

＆＃13;

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

＆＃13;

此解决方案非常便宜（它使用CSS动画，are supported by most major browsers）并且看起来非常好。

Three.js：如何进行淡入淡出场景转换？

1 个答案:

分步流程：