使用 three.js 按顺序动画立方体

Question

我正在尝试复制此效果，如下所示： https://dribbble.com/shots/1783699-Blocks?list=users&offset=2

我在 3d 空间中有一堆立方体，沿着 x 和 z 轴放置，带有循环 - 到目前为止一切都很好。我无法以如此特定的顺序为它们制作动画。我想我应该循环遍历它们并根据其位置沿其 Y 轴以不同的时间缩放它们中的每一个？

其次，我想我应该使用 setInterval() 来触发动画序列，但我不知道如何实现它......

我现在有这段代码用于循环遍历这些框并缩放它们：

var r = -1;
(function f(){
    r = (r + 1) % cubes.length;
    cubes[r].scale.y += cubes[r].vy;
    if (cubes[r].scale.y >= 1.4) {
        cubes[r].vy *= -1;
}
setInterval(f, 200);

但这并没有完成这种波浪式，逐步缩放......

这是我目前拥有的链接： http://codepen.io/gbnikolov/pen/NPGqqq

Answer 1

您链接的演示中的效果本质上是表达正弦波传播。如果您想实现这一点，您需要根据时间和空间参数相对于正弦波缩放立方体。

我们将从时间开始。我建议单独执行这些步骤中的每一个，这样您就可以看到它们是如何结合起来产生最终结果的。 requestAnimationFrame 回调采用单个参数，即高分辨率动画时间。我们可以简单地将其应用于立方体高度比例：

function drawFrame(ts) {
    requestAnimationFrame(drawFrame);
    render.render(scene, camera);
    cubes.forEach(function(c) {
        c.scale.y = Math.sin(ts/500) + 1;
    });
}

注意我们将时间戳ts除以500；这允许您调整动画的速度。时间戳以毫秒为单位，因此除以 500 意味着它将每 3.14 (pi) 秒完成一次周期。如果你想在 N 秒内完成，你可以除以 500*pi 再乘以 N。

我们还将正弦波加 1 以使其所有值均为正值（通常，其范围为 [-1,1]；加 1 使其范围为 [0,2]）。

现在我们可以通过将维度分量之一添加到正弦函数来启动“波”。我们将从 x 维度任意开始：

c.scale.y = Math.sin(ts/500 + c.position.x/4.95) + 1;

我通过反复试验找到了 4.95；通过调整该数字，您可以确定波浪的“分辨率”。更大的数字意味着更平滑的波浪。

然后，最后，我添加了 z 维度：

c.scale.y = Math.sin(ts/500 + c.position.x/4.95 + c.position.z/12) + 1;

我再次使用 z-divider，直到找到一个看起来不错的参数。

这是使用此解决方案修改的 CodePen：

http://codepen.io/anon/pen/JoYdGv