javascript - 使用 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 分隔符，直到找到一个看起来不错的参数。

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

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