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 示例一样：

当此形状的translation、rotation或scale更改时，这些更改将反映为围绕形状中心的变换。

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

示例 1：在标准化空间中预定义

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

示例 2：事后规范化

在这个codepen示例中，我们正在使用我们已经拥有的东西。ATwo.Group包含我们所有的形状（较大的圆圈以及较小的圆圈的数组）。通过使用该方法group.center();（第 31 行），我们可以将组的孩子归一化为 (0, 0) 左右。然后，我们可以更改translation组的位置以处于所需的位置。

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