按三个.js序列对立方体进行动画处理

Animating cubes in a sequence with three.js

本文关键字：立方体 处理 动画 js 三个      更新时间：2023-09-26

我正在尝试复制这种效果，如下所示：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

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

我们将从时间开始。 我建议单独执行这些步骤中的每一个，这样您就可以看到它们如何组合以产生最终结果。 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 除法器，直到找到一个看起来不错的参数。

下面是使用此解决方案修改的代码笔：

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

相关文章：