javascript - 在其位置旋转一个 Two.js 对象

Question

我有一个大圆圈，里面有小圆圈，使用 two.js 制作.

我的问题是这两个不是在自己的位置旋转而是在左上角的轴上旋转。 我希望圆圈组 (circlesGroup) 仅在静态位置的大圆圈内旋转。 circlesGroup 和大圆组合在一起作为 rotatoGroup。

two.bind('update', function(frameCount, timeDelta) {
  circlesGroup.rotation = frameCount / 120;
});

two.bind('update', function(frameCount, timeDelta) {
  rotatoGroup.rotation = frameCount / 60;
});

整个代码在CodePen中.

Answer 1

当使用 two.make... 调用时，所有可见形状(圆形、矩形、多边形和直线)都朝向中心，就像这个 Adob​​e Illustrator 示例:

当此形状的平移、旋转 或缩放 更改时，这些更改将反射(reflect)为围绕形状中心的转换。

然而，

Two.Group 不会这样做。将它们视为无显示矩形。它们是原点，即 group.translation 向量，始终从 (0, 0) 开始。在您的情况下，您可以通过规范化您在所有圈子上定义的翻译来处理这个问题。

示例 1:在规范化空间中预定义

在此codepen例如，我们在 -100、100 周围定义所有圆圈的位置，实际上是正负 x 和 y 方向上半径的一半。一旦我们在这些约束内定义了圆圈，我们就可以使用 group.translation.set 移动整个组，将其放置在屏幕中央。现在，当圆圈旋转时，它们被感知围绕着自己旋转。

示例 2:事后规范化

在此codepen例如，我们正在使用我们已经拥有的东西。 Two.Group 包含我们所有的形状(较大的圆以及较小圆的数组)。通过使用 group.center(); 方法(第 31 行)，我们可以将组的子项标准化为 (0, 0)。然后，我们可以更改组的翻译，以便位于所需的位置。

注意:这个例子有点复杂，因为它调用了 underscore 的 defer 方法，该方法在注册所有更改后强制将组居中。我正在解决这个问题。