I am currently developing a game using Three.js and I am in need of capturing user input. I have two handler functions set up for this purpose;
function press(evt)
{
console.log(evt);
var code = evt.which || evt.keyCode;
switch(code)
{
case KEY.W: input.up = true; break;
case KEY.A: input.left = true; break;
case KEY.S: input.down = true; break;
case KEY.D: input.right = true; break;
case KEY.E: input.e = true; break;
case KEY.Z: input.z = true; break;
case KEY.ONE: input.one = true; break;
case KEY.CTRL: input.ctrl = true; break;
case KEY.P: input.plus = true; break;
case KEY.M: input.minus = true; break;
case KEY.SH: input.shift = true; break;
}
}
function release(evt)
{
console.log(evt);
var code = evt.which || evt.keyCode;
switch(code)
{
case KEY.W: input.up = false; break;
case KEY.A: input.left = false; break;
case KEY.S: input.down = false; break;
case KEY.D: input.right = false; break;
case KEY.E: input.e = false; break;
case KEY.Z: input.z = false; break;
case KEY.ONE: input.one = false; break;
case KEY.CTRL: input.ctrl = false; break;
case KEY.P: input.plus = false; break;
case KEY.M: input.minus = false; break;
case KEY.SH: input.shift = false; break;
}
}
In my previous projects, both of these functions worked perfectly fine. Here's how I attach the event listeners:
document.addEventListener("keydown", press, false);
document.addEventListener("keyup", release, false);
While everything runs smoothly when the site is loaded normally, it seems to stop functioning properly when switching to fullscreen mode!
This snippet shows the setup within the init(); function, which is triggered by the body onload event:
var init = function()
{
started = false;
isFullscreen = false;
changeFSState = function()
{
if (isFullscreen == true)
{
isFullscreen = false;
game.stop(); //lol
}
else
{
isFullscreen = true;
}
}
container = document.getElementById("container");
document.body.appendChild(container);
document.addEventListener("keydown", press, false);
document.addEventListener("keyup", release, false);
document.addEventListener("webkitfullscreenchange", changeFSState, false);
document.addEventListener("mozfullscreenchange", changeFSState, false);
game = new Game(container);
}
When the play button is clicked, the following happens:
THREEx.FullScreen.request(self.container);
self.renderer.setSize(screen.width, screen.height);
However, after clicking the play button (which is actually a link), the input events are no longer being logged in the console - as if they are not being triggered at all.