Three.js FirstPersonControls 相机旋转在 GSAP 补间/重启控件后跳回答案

【问题标题】：Three.js FirstPersonControls camera rotation jumps back after GSAP tween / restart controlsThree.js FirstPersonControls 相机旋转在 GSAP 补间/重启控件后跳回
【发布时间】：2020-11-11 01:33:43
【问题描述】：

在使用 slerp 的 raycaster 上鼠标按下后尝试旋转相机。但是在动画之后，当我重新打开控件时，相机会跳回之前的旋转。更新控件似乎不能解决这个问题。我在这里缺少什么？

function mousedown( event ) {
    
  mouse.x = ( event.clientX / windowWidth ) * 2 - 1;
  mouse.y = - ( event.clientY / windowHeight ) * 2 + 1;
  raycaster.setFromCamera( mouse, camera );
  intersects = raycaster.intersectObjects( targets );

  if ( intersects.length > 0 ) {

    // stop controls
    controls.enabled = false;

    var targetOrientation = intersects[0].object.quaternion.normalize();
    gsap.to({}, 1, { 
      onUpdate: function() {
        controls.update();
        //camera.lookAt( intersects[0].object.position );
        camera.quaternion.slerp( targetOrientation , this.progress() );
      },
      onComplete: function() {
        controls.update();
        //camera.lookAt(new THREE.Vector3( 0, 0, 0 ) );

        // restart controls
        controls.enabled = true;
      }
    });
  }
}

https://jsfiddle.net/pixeldino/s30pbzj7/152/

【问题讨论】：

标签： three.js gsap

【解决方案1】：

FirstPersonControls 保持相机方向的内部状态。通过使用camera.quaternion.slerp()，此状态将不同步。

您可以在动画结束时使用FirstPersonControls.lookAt() 来解决此问题。这样，内部状态将通过强制控件查看目标点来更新。

https://jsfiddle.net/fnw8643a/

【讨论】：