ThreeJS补间JS |平稳移动并旋转相机至对象]]

Question

单击对象时，我可以围绕它移动和旋转。

这是不平滑的代码：

mouseEvents() {
  window.addEventListener('click', (event: MouseEvent) => {
    event.preventDefault()
    // Get the mouse position
    this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

    this.raycaster.setFromCamera(this.mouse, this.camera)

    var intersects = this.raycaster.intersectObjects(this.scene.children, true)
    for (var i=0; i<intersects.length; i++) {
      // Look at the object and rotate around it
      this.controls.target.set( intersects[i].point.x, intersects[i].point.y, intersects[i].point.z )
      // Move to the object
      this.camera.position.x = intersects[i].point.x
      this.camera.position.y = intersects[i].point.y
      this.camera.position.z = (intersects[i].point.z) + 1000     
    }
  })
}
现在，我想做完全相同的铰接，但旋转并平稳移动。在互联网上阅读了一堆之后，我找到了TweenJS并使用了它。 问题是我可以平稳地朝对象移动，但我不知道如何看待对象并平滑地绕它旋转

。

这是简单的代码：

mouseEvents() {
  window.addEventListener('click', (event: MouseEvent) => {
    event.preventDefault()
    // Get the mouse position
    this.mouse.x = (event.clientX / window.innerWidth) * 2 - 1
    this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1

    this.raycaster.setFromCamera(this.mouse, this.camera)

    var intersects = this.raycaster.intersectObjects(this.scene.children, true)
    for (var i=0; i<intersects.length; i++) {
      // Look at the object and rotate around it smoothly (using tweenjs I suppose)
      ????????????
      // Move to the object smoothly
      var position = this.camera.position;
      var target = { x : intersects[i].point.x, y: intersects[i].point.y, z: intersects[i].point.z + 1000 };
      var tween = new TWEEN.Tween(position).to(target, 2000);
      tween.easing(TWEEN.Easing.Linear.None)
      tween.start()
    }
  })
}

当我单击一个对象时，我可以围绕它移动和旋转。这是不平滑的代码：mouseEvents（）{window.addEventListener（'click'，（event：MouseEvent）=> {event.preventDefault（）...

Answer 1

您可能需要在渲染循环或补间自定义更新功能中的某个位置添加camera.lookAt（yourTargetPoint）。

Answer 2

我找到了另一种解决方案。我使用了2个不同的补间，其中1个用于移动照相机，另1个用于使照相机看着对象。