使用Three.js实现多张图片沿圆周公转且保持自身无自转的问题咨询

问题解决方法 #

你遇到的自转问题是因为实现公转逻辑时误修改了图片Mesh的旋转属性，或将图片Mesh挂载到了旋转的父节点下，父节点旋转会同步带动子节点旋转。可以用以下两种方案修改：

方案1：手动计算轨道坐标（无额外节点开销） #

仅在动画帧中计算图片的轨道坐标赋值给position属性，全程不修改图片的rotation属性即可，参考代码如下：

// 定义全局变量存储累计旋转角度
private orbitAngle = 0;
private orbitRadius = 5; // 替换为你的实际轨道半径

animate() {
  requestAnimationFrame(() => this.animate());
  
  // 累计轨道角度，控制公转速度
  this.orbitAngle += 0.01;
  
  this.imageMeshList.forEach((mesh, index) => {
    // 计算每个图片的当前轨道角度，index保证4张图均匀分布
    const currentAngle = this.orbitAngle + index * (Math.PI / 2);
    // 仅更新位置，不修改rotation
    mesh.position.x = this.orbitRadius * Math.cos(currentAngle);
    mesh.position.z = this.orbitRadius * Math.sin(currentAngle);
    // 如果需要图片始终朝向相机，保留下面这行，不需要则删除
    // mesh.lookAt(this.camera.position);
  });

  this.renderer.render(this.scene, this.camera);
}

方案2：分组嵌套实现（逻辑更清晰） #

• 为每一张图片创建独立的THREE.Group空组，将图片Mesh挂载到对应空组下，初始化时设置好图片在组内的偏移位置（即轨道半径距离）
• 将所有空组统一挂载到轨道根容器下，仅修改根容器的rotation属性实现公转，图片Mesh本身的rotation全程固定为初始值，不会产生自转

// 初始化逻辑示例
this.orbitRoot = new THREE.Group();
this.scene.add(this.orbitRoot);

const imageCount = 4;
for(let i=0; i<imageCount; i++) {
  const group = new THREE.Group();
  // 提前设置组的初始角度，保证图片均匀分布在轨道上
  group.rotation.y = i * (Math.PI / 2);
  this.orbitRoot.add(group);

  const imgMesh = createYourImageMesh(); // 替换为你的图片Mesh创建逻辑
  // 图片在组内仅设置X/Z轴的偏移，即轨道半径
  imgMesh.position.z = this.orbitRadius;
  // 固定图片的初始朝向，后续不再修改
  imgMesh.rotation.y = Math.PI; // 按需调整为你需要的初始朝向
  group.add(imgMesh);
}

// 动画逻辑仅修改根容器的旋转
animate() {
  requestAnimationFrame(() => this.animate());
  this.orbitRoot.rotation.y += 0.01; // 仅修改根容器旋转，图片不会自转
  this.renderer.render(this.scene, this.camera);
}

注意：如果不需要图片始终面向相机，不要在动画循环中调用lookAt方法，也不要添加任何修改图片Mesh rotation属性的逻辑。

内容的提问来源于stack exchange，提问作者Arjun M Nair