Три JS Твин 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     
    }
  })
}

Теперь я хочу сделать точно такой же шарнир, но вращающийся и движущийся плавно. После нескольких чтений на inte rnet я нашел 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 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()
    }
  })
}

Answer 1

Возможно, вам нужно добавить camera.lookAt (yourTargetPoint) где-то в вашем рендере l oop или в пользовательской функции обновления анимации.

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

Также необходимо убедиться, что камера добавлен в сцену. Вы можете выполнить рендеринг с помощью камеры, которая не прикреплена к сцене, но тогда ее матрицы не будут обновляться на этапе рендеринга, и в этом случае вам придется вызывать .updateMatrixWorld (), чтобы принудительно обновить ее матрицы. Но проще просто scene.add (камера)

Answer 2

Я нашел другое решение. Я использовал 2 разных анимации, 1, чтобы переместить камеру, и 1, чтобы камера смотрела на объект.

Вот код:

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

    }
  })
}