Three.js:如何做淡入淡出的场景过渡? [英] Three.js: How to do a fade scene transition?

问题描述

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

I can't seem to find a standard way to animate the switching between the current rendered scene in Three.js. I have simplified my implementation as follows:

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 改变时，我想要的是一个简单的淡入黑色动画.您建议通过什么方式来实现这一目标?谢谢.

Right now, this produces a sudden cut off to the next scene which is not user friendly. What I want is a simple fade to black animation when the variable currentScene changes. What way would you suggest to achieve this? Thanks.

推荐答案

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

You could do this without the need of Three.js. Just place a div covering the canvas and animate it to fade to black screen and back. You wait half the time the animation takes and change the screen at that point (using setTimeout()).

• 在画布上放置一个 div(您应该使用 绝对定位)
• 添加一个包含动画的 CSS 类(参见下面的示例)
• 为动画设置关键帧(参见下面的示例)
• 通过以下方式触发动画:

• Place a div on top of your canvas (you should be using absolute positioning)
• Add a CSS class that includes an animation (see example below)
• Setup the keyframes for the animation (see example below)
• Trigger then animation by:

1. 从元素中删除类
2. 作用于元素(例如div.offsetWidth)
3. 将类添加到元素

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

The animation will trigger when an element has the class. Then, it will play until it finishes or the element loses the class, whatever comes first.

这是一个例子:

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 动画，大多数主流浏览器都支持a>) 看起来很漂亮.

This solution is very cheap (it uses CSS animations, which are supported by most major browsers) and looks very nice.

这篇关于Three.js:如何做淡入淡出的场景过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！