Warthunder like Mouse Flight Controls for Threejs

Questions
, , ,
1

Here is a CodeSandBox Link

I’m looking to recreate flight controls like the one for Unity from this repo. From what I understand, it uses a mouseAim rig and a cameraRig. In the codesandbox I have set up a basic mouseAim rig that I believe is pretty much the same idea.

However I am unsure on how to make the camera follow the mouseAim.target location like the gif on the repo. The code that rotates the camera in the repo is like this:

// Smoothly rotate the camera to face the mouse aim.
cameraRig.rotation = Damp(cameraRig.rotation,
                          Quaternion.LookRotation(mouseAim.forward, upVec),
                          camSmoothSpeed,
                          Time.deltaTime);
// Damp function
private Quaternion Damp(Quaternion a, Quaternion b, float lambda, float dt) {
    return Quaternion.Slerp(a, b, 1 - Mathf.Exp(-lambda * dt));
}

I was thinking that I need to set up some sort of orbit camera rig first, but not sure if there is a simpler method. I appreciate any guidance

2

I’ve updated the CSB and managed to get a camera pivot to work. The only issue is is that when I start moving the mouseAim rig when you uncomment this line (line number 41 in the CSB):

// Update mouseAim rig and target
    mouseAim.rig.getWorldDirection(mouseAim.forward)
    mouseAim.distance.copy(mouseAim.forward)
    mouseAim.distance.multiplyScalar(-100)
    mouseAim.target.copy(mouseAim.rig.position).add(mouseAim.distance)
    // mouseAim.rig.position.addScaledVector(mouseAim.forward, -0.01) <-- This one

The camera starts moving ahead of the rig. Even though I am pretty sure that I try to keep it relative to the mouseAim rig position.