Camera stutters when panning diagonally with keys

[Pietro Paolo Vismara]

Describe the bug

The camera stutters when panned using truck and forward in combination.
This is especially noticeable if the camera is positioned above the target, in a top-down view.

To Reproduce

Steps to reproduce the behavior:

1. Go to the keyboard example
2. Play a bit with diagonal movement using keys (A + W, A + S, D + S.....)
3. Notice the camera stutters, especially when changing direction

Live example

https://yomotsu.github.io/camera-controls/examples/keyboard.html

Expected behavior

Diagonal panning should be as smooth as it is when panning with the mouse.

Device

Desktop

OS

Windows

Browser

Chrome

[Pietro Paolo Vismara]

Looks like the issue is with the keyboard example itself rather than with camera-controls.

I solved this by forcing at most 1 call to truck and forward for each update cycle.

    // Key down
    aKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_START, (event) => {
      if (event != null) {
        this.truckMovement = -0.2;
      }
    });
    dKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_START, (event) => {
      if (event != null) {
        this.truckMovement = 0.2;
      }
    });
    wKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_START, (event) => {
      if (event != null) {
        this.forwardMovement = 0.2;
      }
    });
    sKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_START, (event) => {
      if (event != null) {
        this.forwardMovement = -0.2;
      }
    });
    
     // Key up
    aKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_END, (event) => {
      if (this.truckMovement < 0) {
        this.truckMovement = 0;
      }
    });
    dKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_END, (event) => {
      if (this.truckMovement > 0) {
        this.truckMovement = 0;
      }
    });
    wKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_END, (event) => {
      if (this.forwardMovement > 0) {
        this.forwardMovement = 0;
      }
    });
    sKey.addEventListener(holdEvent.HOLD_EVENT_TYPE.HOLD_END, (event) => {
      if (this.forwardMovement < 0) {
        this.forwardMovement = 0;
      }
    });

Then in the update loop...

    const animate = () => {
      requestAnimationFrame(animate);
      this.controls.truck(this.truckMovement * 16, 0, false);
      this.controls.forward(this.forwardMovement  * 16, false);
      this.controls.update(0.016);
      this.renderer.render(this.scene, this.camera);
    };

    animate();

[Akihiro Oyamada]

Sorry for the delay and thanks for your inspection.
I should fix another lib then:
https://github.com/yomotsu/hold-event

Let me close this issue at this time