如何让3D服装模型始终旋转180度以展示背面？

当前代码使用_scene.rotation.y - Math.PI作为动画目标角度，属于相对当前角度的计算逻辑，导致模型处于180度旋转状态时，点击按钮会转回正面，无法稳定展示背面。以下是两种可行的解决方案：

方案1：固定目标背面角度（推荐） #

假设模型初始正面朝向相机时，场景y轴旋转角度为0，那么背面朝向相机的固定角度为Math.PI（若旋转方向相反，可使用-Math.PI）。直接将动画目标设为该固定值，无论当前模型处于什么角度，点击按钮后都会动画旋转到背面朝向相机的状态。

修改后的Anime.js代码：

anime({
  targets: _scene.rotation,
  y: Math.PI, // 固定目标为背面角度
  duration: 2000,
  easing: 'easeInOutQuad',
  update: () => {
    renderSceneAndCamera();
  }
});

方案2：跟踪状态实现切换式旋转 #

若希望每次点击按钮都触发180度旋转动画，同时确保最终状态为背面展示，可通过状态变量跟踪当前朝向：

1. 新增状态变量记录当前展示状态：

let isBackShowing = false;

2. 修改按钮点击的动画逻辑：

function showBackFace() {
  // 根据当前状态计算目标角度
  const targetY = isBackShowing 
    ? _scene.rotation.y - Math.PI
    : _scene.rotation.y + Math.PI;

  anime({
    targets: _scene.rotation,
    y: targetY,
    duration: 2000,
    easing: 'easeInOutQuad',
    update: () => {
      renderSceneAndCamera();
    },
    complete: () => {
      isBackShowing = !isBackShowing; // 切换状态
    }
  });
}

注意：THREE.js中旋转角度是循环的（2π等价于0），若用户手动旋转模型，状态变量可能与实际朝向不一致，因此方案1的稳定性更强。

额外优化：与OrbitControls兼容 #

若使用OrbitControls控制相机绕模型旋转，建议直接旋转模型本身而非整个场景，避免逻辑冲突：

1. 加载模型时保存到全局变量：

let _clothingModel; // 保存服装模型实例

function doSometing() {
  gltfloader.load(
    url,
    (gltfModelOnLoad) => {
      _clothingModel = gltfModelOnLoad.scene;
      _scene.add(_clothingModel);
    },
    undefined,
    undefined
  );
}

2. 动画模型自身的旋转：

anime({
  targets: _clothingModel.rotation,
  y: Math.PI,
  duration: 2000,
  easing: 'easeInOutQuad',
  update: () => {
    renderSceneAndCamera();
  }
});

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