Implementé una función de control de teclado de tres js que funciona bien siempre que la cámara esté orientada hacia el norte, este u oeste, cuando gira hacia el sur, sureste o suroeste, los controles se invierten.
if(controls["KeyW"]){ // w camera.position.x -= Math.sin(camera.rotation.y) * player.speed; camera.position.z -= -Math.cos(camera.rotation.y) * player.speed; } if(controls["KeyS"]){ // s camera.position.x += Math.sin(camera.rotation.y) * player.speed; camera.position.z += -Math.cos(camera.rotation.y) * player.speed; } if(controls["KeyA"]){ // a camera.position.x += Math.sin(camera.rotation.y + Math.PI / 2) * player.speed; camera.position.z += -Math.cos(camera.rotation.y + Math.PI / 2) * player.speed; } if(controls["KeyD"]){ // d camera.position.x += Math.sin(camera.rotation.y - Math.PI / 2) * player.speed; camera.position.z += -Math.cos(camera.rotation.y - Math.PI / 2) * player.speed; } if(controls["Space"]) { // space if(player.jumps) return false; player.jumps = true; player.velocity = -player.jumpHeight; } }para ayudarlo a comprender mejor el problema al que me he enfrentado, aquí hay un enlace a mi sitio web, supongo que el seno y el coseno invierten sus valores después de una rotación de 180
bueno, el error que estaba cometiendo era que estaba usando controles de puntero para la navegación del mouse y disparadores de teclado para moverme, investigué un poco los documentos y me di cuenta de que podía usar funciones integradas de PointerLockControls llamadas moveForward y moveRight
const mouseControls = new PointerLockControls(camera, renderer.domElement); document.addEventListener( 'click', () => { mouseControls.lock() }, false) const keysDown: any = { "KeyW": 0, "KeyA": 0, "KeyS": 0, "KeyD": 0, } document.addEventListener("keydown", ({ code }) => { keysDown[code] = 1 }) document.addEventListener("keyup", ({ code }) => { keysDown[code] = 0 }) function updateControls() { const forwardDirection = keysDown["KeyW"] - keysDown["KeyS"]; const rightDirection = keysDown["KeyD"] - keysDown["KeyA"]; mouseControls.moveForward(forwardDirection * player.speed) mouseControls.moveRight(rightDirection * player.speed) } ////////main animation function function animate() { requestAnimationFrame( animate ); updateControls(); renderer.render( scene, camera ); }; animate();