How to create a aiming camera position in a game

Questions
, , ,
1

So, I have a third person camera:

    if (!aiming) {
      
    let cameraPhi = Math.PI / 6;

const cameraOffset = new THREE.Vector3(2, 4, 3);

let cameraDistance = cameraOffset.length();
const knightPosition = mainCharacter.getModel().position.clone();
const cameraPosition = new THREE.Vector3();

const mouseDiff = new THREE.Vector2().subVectors(mouse, prevMouse);


const sensitivityX = 4; // Sensibilidade para o eixo X
const sensitivityY = 0.5; // Sensibilidade para o eixo Y


  cameraTheta += mouseDiff.x * sensitivityX;
  cameraPhi += mouseDiff.y * sensitivityY;


  const maxVerticalAngle = Math.PI / 4;
  cameraTheta = Math.atan2(cameraPosition.z - knightPosition.z, cameraPosition.x - knightPosition.x) + (mouseDiff.x * sensitivityX);
  cameraPhi = Math.max(minVerticalAngle, Math.min(maxVerticalAngle, cameraPhi + mouseDiff.y * sensitivityY));
  cameraDistance = cameraOffset.length() - mouseDiff.y * sensitivityY * 0.1;
  cameraPosition.x = knightPosition.x + cameraDistance * Math.sin(cameraTheta) * Math.cos(cameraPhi);
  cameraPosition.y = knightPosition.y + cameraDistance * Math.sin(cameraPhi) + 1.5;
  cameraPosition.z = knightPosition.z + cameraDistance * Math.cos(cameraTheta) * Math.cos(cameraPhi);
  camera.position.copy(cameraPosition);
  camera.lookAt(knightPosition);

  mainCharacter.getModel().rotation.y = cameraTheta;
  mainCharacter.getModel().rotation.y += Math.PI;
    }

When I start to aim, I deactivate this piece of code so I can lerp the camera and transition to a more close camera to take aim.

      if (cameraLerping) {
      const targetCamera = mainCharacter.getModel().position.clone();
      targetCamera.y = mainCharacter.getModel().position.y + 3;
      targetCamera.x = mainCharacter.getModel().position.x + 2;
      targetCamera.z = mainCharacter.getModel().position.z + 1.6
      camera.position.lerp(targetCamera, 0.1);
      }

      setTimeout(() => {
        cameraLerping = false;
      }, 700)

My issue starts in this phase. I am not being able to implement a correct camera that the player can move to aim and still be fixed on the position that it lerped to. Can someone help me with this? Here’s the code I’ve tryed:

 aiming = true;

      let cameraDistance = cameraOffset.length();
      const knightPosition = mainCharacter.getModel().position.clone();
      const cameraPosition = new THREE.Vector3();

      const mouseDiff = new THREE.Vector2().subVectors(mouse, prevMouse);


      const sensitivityX = 4; // Sensibilidade para o eixo X
      const sensitivityY = 0.5; // Sensibilidade para o eixo Y


        cameraTheta += mouseDiff.x * sensitivityX;
        cameraPhi += mouseDiff.y * sensitivityY;


        const maxVerticalAngle = Math.PI / 4;
        cameraTheta = Math.atan2(cameraPosition.z - knightPosition.z, cameraPosition.x - knightPosition.x) + (mouseDiff.x * sensitivityX);
        cameraPhi = Math.max(minVerticalAngle, Math.min(maxVerticalAngle, cameraPhi + mouseDiff.y * sensitivityY));
        cameraDistance = cameraOffset.length() - mouseDiff.y * sensitivityY * 0.1;

        if (!cameraLerping) {
          cameraPosition.x = knightPosition.x + 6 * Math.sin(cameraTheta) * Math.cos(cameraPhi);
          cameraPosition.y = knightPosition.y + 3 * Math.sin(cameraPhi) + 1.5;
          cameraPosition.z = knightPosition.z - 2 * Math.cos(cameraTheta) * Math.cos(cameraPhi);
          camera.position.copy(cameraPosition);

          const characterRotation = mainCharacter.getModel().rotation;

          const characterDirection = new THREE.Vector3();
          characterDirection.set(
            Math.sin(characterRotation.y), // Rotação em relação ao eixo Y (yaw)
            Math.sin(characterRotation.x), // Rotação em relação ao eixo X (pitch)
            Math.cos(characterRotation.y) * Math.cos(characterRotation.x)
          );

          characterDirection.normalize();

          // Calcule a posição do alvo (target) da câmera
          const targetCamera = mainCharacter.getModel().position.clone();
          targetCamera.add(characterDirection);


          camera.lookAt(targetCamera);
        }

Here’s a video of the full process in game: