温馨提示:本文翻译自stackoverflow.com,查看原文请点击:angular - ThreeJS Tween JS | Move AND Rotate the camera to an object smoothly
3d angular three.js tween.js

angular - ThreeJS补间JS |

发布于 2020-04-05 00:36:41

当我单击一个对象时,我可以围绕它移动和旋转。

这是不平滑的代码:

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

查看更多

提问者
William
被浏览
86
manthrax 2020-02-03 20:44

您可能需要在渲染循环或补间自定义更新功能中的某处添加camera.lookAt(yourTargetPoint)。

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

您还需要确保将相机添加到场景中。您可以使用ISNT附加到场景的摄像机进行渲染,但是在渲染阶段不会更新其矩阵,在这种情况下,您必须调用.updateMatrixWorld()来强制更新其矩阵。但是它更容易为scene.add(camera)