Three.js旋转木马构建：非三角函数方式克隆放置马匹问题

你的这个思路其实完全可行！问题大概率出在旋转和添加马匹的顺序，或是你旋转的对象不对。我们一步步拆解实现方法：

核心逻辑 #

我们需要一个作为旋转木马底座的THREE.Group（比如命名为carouselGroup），所有马匹都作为这个Group的子元素。核心思路是：

1. 计算每匹马之间的间隔角度：360°÷8 = 45°，转换成弧度就是Math.PI * 2 / 8
2. 在容器的局部坐标系固定位置（比如(radius, 0, 0)，radius是旋转木马的半径）添加第一匹马
3. 旋转整个carouselGroup对应角度，再在同一个局部位置添加下一匹马
4. 重复8次，就能得到8匹均匀分布在圆周上的马

关键是要旋转容器Group，而非单独旋转每匹马，靠容器的旋转来改变新添加马匹的世界位置，完美匹配你想要的实现方式。

具体代码示例 #

假设你已经加载好马匹模型（比如叫horseModel），且已设置好旋转木马半径radius：

// 1. 创建旋转木马容器Group
const carouselGroup = new THREE.Group();
scene.add(carouselGroup);

// 2. 计算每匹马的间隔角度（弧度）
const angleStep = Math.PI * 2 / 8;

// 3. 克隆并添加8匹马
for (let i = 0; i < 8; i++) {
  // 克隆马匹模型（深克隆保留层级、材质和几何体）
  const horseClone = horseModel.clone(true);
  // 固定局部位置：容器坐标系下的(radius, 0, 0)
  horseClone.position.set(radius, 0, 0);

  // 将克隆马加入容器
  carouselGroup.add(horseClone);

  // 旋转容器，为下一匹马的位置做准备
  carouselGroup.rotation.y += angleStep;
}

为什么这个方法能生效？ #

每次添加完一匹马后，我们旋转整个容器，下一次添加的马虽然局部位置还是(radius,0,0)，但容器已经转了一个角度，它的世界位置会自动对应圆周上的下一个点。循环结束后，容器总共旋转360度回到初始角度，而8匹马已经均匀分布在圆周上了。

容易踩坑的地方 #

• 一定要旋转容器Group，而非单独旋转马匹，否则无法实现批量位置偏移
• 如果模型有多层级结构，克隆时要用clone(true)做深克隆，避免共享资源导致的显示异常
• 确保马匹模型的原点位置正确，如果模型原点不在底部，可能需要调整horseClone.position或修改模型原点，避免马匹位置偏移

内容的提问来源于stack exchange，提问作者Oha Noch