Angular ThreeJS Tween JS |将相机平稳地移动并旋转到对象上

当我点击一个物体时，我可以围绕它移动和旋转

这是非平滑代码：

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     
    }
  })
}

mouseEvents（）{
window.addEventListener（'click'，（事件：MouseEvent）=>{
event.preventDefault（）
//获取鼠标位置
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）
对于（var i=0；i{
event.preventDefault（）
//获取鼠标位置
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）
对于（var i=0；i，您可能需要在渲染循环或tweens自定义更新函数中的某个位置添加摄影机

var target = new THREE.Vector3()
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++) {
      target.copy(intersects[i].point)
      var tween = new TWEEN.Tween(this.camera.position).to(target, 2000)
      tween.easing(TWEEN.Easing.Linear.None)
      tween.onUpdate(() => {
        this.camera.lookAt( target )
      })
      tween.start()
break; // BREAK HERE BECAUSE WE ONLY CARE ABOUT THE FIRST/AKA NEAREST COLLISION
    }
  })
}


var target=new THREE.Vector3（）
mouseEvents（）{
window.addEventListener（'click'，（事件：MouseEvent）=>{
event.preventDefault（）
//获取鼠标位置
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）
对于（var i=0；i{
这个。摄影机。注视（目标）
})
tween.start（）
break；//在这里中断，因为我们只关心第一次/最近的碰撞
}
})
}

您还需要确保已将摄影机添加到场景中。您可以使用未连接到场景的摄影机进行渲染，但其矩阵在渲染阶段不会得到更新，在这种情况下，您必须调用.updateMatrix（）来强制更新其矩阵。但仅使用scene.add（摄影机）更容易
我找到了另一种解决方案。我使用了两种不同的tweens，一种用来移动相机，另一种用来让相机看到物体

代码如下：

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()
    // 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++) {

      // Move the camera towards the object and stay 1000 above it on z axis
      var positionX = intersects[i].point.x
      var positionY = intersects[i].point.y
      var positionZ = (intersects[i].point.z) + 1000    

      var positionStart = this.camera.position
      var positionEnd = { x : positionX, y: positionY, z: positionZ }
      var tweenPosition = new TWEEN.Tween(positionStart).to(positionEnd, 2000)
      tweenPosition.easing(TWEEN.Easing.Linear.None)
      tweenPosition.start()

      // Make the camera look at the object
      var rotationX = intersects[i].point.x
      var rotationY = intersects[i].point.y
      var rotationZ = intersects[i].point.z

      var rotationStart = this.controls.target
      var rotationEnd = { x : rotationX, y: rotationY, z: rotationZ }
      var tweenRotation = new TWEEN.Tween(rotationStart).to(rotationEnd, 2000)
      tweenRotation.easing(TWEEN.Easing.Linear.None)
      tweenRotation.start()

    }
  })
}

mouseEvents（）{
window.addEventListener（'click'，（事件：MouseEvent）=>{
event.preventDefault（）
//获取鼠标位置
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）
对于（var i=0；i当我这样做时，我得到了“无法读取未定义的属性'lookAt'”，你知道为什么吗？this.camera.lookAt可能？好吧，我不再有这个错误，所有的事情都与onUpdate（）有关，但这一点都不平滑。摄影机正在平滑地向对象移动，并在最后一秒旋转并查看对象。调用controls.update后，您必须执行.lookAt，以便它覆盖controls.updates lookAt（controls.target）或者删除对控件的调用。更新。我用当前版本的代码编辑了我的帖子，你能编辑你的帖子以便我理解你的意思吗，因为我必须承认我不明白：sDid我理解正确，你为
相交
数组中的每个对象创建了一个tween？是的，每次我单击一个对象，我基本上都创建了一个tween