三.js | TWEEN.js |平稳旋转相机

问题描述

在程序开始时，我的相机看着点 (0,0)。当我向下滚动时，我增加了相机的 z 坐标。当它达到 160 度时，我想旋转相机以查看放置对象的点 (0,300)。我使用了 cameraLookAt()，但过渡太突然了。我了解了 TWEEN.js 并尝试实施它。但它似乎没有做任何事情。

请帮忙。

  if (camera.position.z > 160) {

      var startRotation = new THREE.Euler().copy( camera.rotation );

      var endRotation = new THREE.Euler().copy( 0,300 );

      var tween = new TWEEN.Tween( startRotation ).to( { rotation: endRotation },2000 )

      tween.onUpdate(() => {
        camera.lookAt(startRotation)
      })

      tween.start()

    }

解决方法

无需为此用例使用动画库。是的，lookAt() 将直接将相机对准指定目标。但是，您可以使用 Quaternion.rotateTowards() 逐步执行定向。这个方法类似于Unity的Quaternion.RotateTowards()。还有一个示例演示了这种方法：

https://threejs.org/examples/webgl_math_orientation_transform

这个想法是为您的相机计算一个目标方向，然后在动画循环中使用 rotateTowards()。您的应用中的目标方向为 endRotation。你只需要它作为四元数。试试看：

const endRotation = new THREE.Quaternion().setFromEuler( new THREE.Euler( 0,300 ) );