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

Question

在程序开始时，我的相机看着点 (0,0,0) .当我向下滚动时，我增加了相机的 z 坐标。当它达到 160 时，我想旋转相机看点 (0,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, 0, 300 );

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

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

      tween.start()

    }

Answer 1

对于此用例，无需使用动画库。是的，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, 0, 300 ) );