Hi guys, I would ask some help to optimize a custom controls I’ve made that use the official PointerLockControls. The controls implements a basic functionality to translate on the X and Z axis. The problem here is that I got a good amount of jittering in the movements on a mid-range laptop, even when the fps are not so bad (between 50 and 60). I guess there is something not well implemented in the translation logic, here is the code:
const startPoint = new T.Vector3(0, 0, 0)
const moveSpeed = 300 * this.scale
const offsetY = 2.5
let direction = new T.Vector3()
let velocity = new T.Vector3()
// reset camera position and rotation
this.camera.position.set(0, 0, 0)
this.camera.rotation.set(0, 0, 0)
this.controls = new T.PointerLockControls(this.camera, this.domElement)
const yawObject = this.controls.getObject()
yawObject.position.set(startPoint.x, offsetY, startPoint.z)
yawObject.rotation.y = Math.PI
this.scene.add(yawObject)
this.controls.forward = false
this.controls.backward = false
this.controls.left = false
this.controls.right = false
const onKeyDown = (e) => {
switch (e.keyCode) {
case 38: // up
case 87: // w
this.controls.forward = true
break
case 37: // left
case 65: // a
this.controls.left = true
break
case 40: // down
case 83: // s
this.controls.backward = true
break
case 39: // right
case 68: // d
this.controls.right = true
break
default:
break
}
}
const onKeyUp = (e) => {
switch (e.keyCode) {
case 38: // up
case 87: // w
this.controls.forward = false
break
case 37: // left
case 65: // a
this.controls.left = false
break
case 40: // down
case 83: // s
this.controls.backward = false
break
case 39: // right
case 68: // d
this.controls.right = false
break
default:
break
}
}
const onPointerLock = (e) => {
// [...] start rendering
this.renderingEnabled = true
}
const onPointerUnlock = (e) => {
// [...] stop rendering
this.renderingEnabled = false
}
document.addEventListener("keydown", onKeyDown, false)
document.addEventListener("keyup", onKeyUp, false)
this.controls.addEventListener("lock", onPointerLock, false)
this.controls.addEventListener("unlock", onPointerUnlock, false)
const X_axis = new T.Vector3(1, 0, 0)
const Z_axis = new T.Vector3(0, 0, 1)
let delta_1
let newX_1
let newZ_1
let delta_2
let newX_2
let newZ_2
const updateControls = (elapsedTime, deltaTime) => {
direction.z = Number(this.controls.forward) - Number(this.controls.backward);
direction.x = Number(this.controls.left) - Number(this.controls.right);
direction.normalize();
if (this.controls.forward || this.controls.backward) {
velocity.z = -direction.z * moveSpeed * deltaTime * deltaTime;
delta_1 = Z_axis.clone().applyQuaternion(yawObject.quaternion).multiplyScalar(velocity.z)
newX_1 = yawObject.position.x + delta_1.x
newZ_1 = yawObject.position.z + delta_1.z
yawObject.position.set(newX_1, offsetY, newZ_1)
}
if (this.controls.left || this.controls.right) {
velocity.x = -direction.x * moveSpeed * deltaTime * deltaTime;
delta_2 = X_axis.clone().applyQuaternion(yawObject.quaternion).multiplyScalar(velocity.x)
newX_2 = yawObject.position.x + delta_2.x
newZ_2 = yawObject.position.z + delta_2.z
yawObject.position.set(newX_2, offsetY, newZ_2)
}
}
const animate = () => {
if (this.renderingEnabled) {
this.deltaTime = this.clock.getDelta()
this.elapsedTime = this.clock.elapsedTime
updateControls(this.elapsedTime, this.deltaTime)
this.renderer.render(this.scene, this.camera)
requestAnimationFrame(animate)
}
}
this.controls.lock()
animate()
Any idea for improvements?
