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

Question

使用 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/

Answer 1

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

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

https://jsfiddle.net/fnw8643a/

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

Three.js FirstPersonControls camera rotation jumps back after GSAP tween / restart controls

three.js

gsap