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/