Camera stutters when panning diagonally with keys
pietrovismara opened this issue · comments
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:
- Go to the keyboard example
- Play a bit with diagonal movement using keys (A + W, A + S, D + S.....)
- 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
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();
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