怎样才能让物体稳定180度？

Question

我有衣服对象，用户可以旋转衣服，我正在使用轨道控制来旋转这里的对象，并且界面，用户可以更改衣服的颜色，有一个按钮可以查看衣服的背面，所以我想确保当用户点击它时它会显示布料的背面

这是我使用 Anime js 制作动画的方式

这就是我初始化 3D 并调用函数

doSmething

显示布料对象背面的方式

let _scene;
let _camera;
let _control;

function init3D() {
    _scene = new THREE.Scene();
    _camera = new THREE.PerspectiveCamera(75, container.value.clientWidth / container.value.clientHeight, 0.1, 1000);
    _control = new OrbitControls(_camera, container.value);
}

init3D()

function doSometing() {
    gltfloader.load(
    url,
     (gltfModelOnLoad) => {
       _scene.add(gltfModelOnLoad.scene);
      
       anime({
          targets: _scene.rotation,
          y: _scene.rotation.y - Math.PI,
          duration: 2000,
          easing: 'easeInOutQuad',
          update: () => {
            renderSceneAndCamera();
          }
        });
   }, 
  undefined, 
  undefined

  )}
}

const renderSceneAndCamera = () => {
  _renderer.render(_scene, _camera);
}


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

当我这样做时

_scene.rotation.y - Math.PI

它并不总是旋转衣服的背面，而且当我已经处于180度的位置时，场景变成旋转衣服的正面，

有什么方法可以使物体始终旋转 180 度，无论旋转 y 发生什么变化？

Answer 1

您应该旋转相机而不是模型。首先获取相机旋转到衣服背面后的位置，保存为常量，然后在需要旋转到衣服背面时使用anime来过渡相机位置。

const backPosition = new THREE.Vector3(1, 1, 1); // The position of the camera when it is on the back of the clothes.

anime({
    targets: _camera.position,
    x: backPosition.x,
    y: backPosition.y,
    z: backPosition.z,
    duration: 2000,
    easing: 'easeInOutQuad',
    update: () => {
        _control.update();
        // renderSceneAndCamera();
    }
});