Develop Reference

What's the best way to restrict movement for the camera to a certain location in THREE js?

I'm making a game that includes gravity and I need to make it so when you hit a wall or something than you can't move. I was thinking something along the lines of just stopping the forward movement but then you can just turn around and go into it backwards. No such luck so far.
Here's my movement code:
document.onkeydown = function(e) {
// e.preventDefault()
if(e.keyCode == 87) {
player.movement.w = true
}
if(e.keyCode == 65) {
player.movement.a = true
}
if(e.keyCode == 83) {
player.movement.s = true
}
if(e.keyCode == 68) {
player.movement.d = true
}
if(e.keyCode == 69) {
player.movement.e = true
}
if(e.keyCode == 81) {
player.movement.q = true
}
}
document.onkeyup = function(e) {
if(e.keyCode == 87) {
player.movement.w = false
}
if(e.keyCode == 65) {
player.movement.a = false
}
if(e.keyCode == 83) {
player.movement.s = false
}
if(e.keyCode == 68) {
player.movement.d = false
}
if(e.keyCode == 69) {
player.movement.e = false
}
if(e.keyCode == 81) {
player.movement.q = false
}
}
function loop() {
requestAnimationFrame(loop)
if(player.look.locked == true) {
if(player.movement.w == true) {
playerObj.translateZ(player.movement.speed / 100)
}
if(player.movement.a == true) {
playerObj.translateX(player.movement.speed / 100)
}
if(player.movement.s == true) {
playerObj.translateZ(player.movement.speed / 100 * -1)
}
if(player.movement.d == true) {
playerObj.translateX(player.movement.speed / 100 * -1)
}
if(player.movement.e == true) {
playerObj.translateY(player.movement.speed / 100 * -1)
}
if(player.movement.q == true) {
playerObj.translateY(player.movement.speed / 50)
}
}
}
loop()
(I know event.keyCode is depreciated)

Javascript disable spacebar scrolling [duplicate]

This question already has answers here:
Pressing spacebar scrolls page down?
(3 answers)
Closed 2 years ago.
I am working on a WebGL application and I use the spacebar for movement of the camera. The problem is, when I press the spacebar the website also scrolls down. Is there a way to disable this feature?
None of the answers so far works reliably. They work for about a second, then the site scrolls down for a tiny amount of time and then the cycle repeats.
This is my code for the keypresses:
window.addEventListener("keydown", (e) => {
if(e.repeat) { return; }
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
});
As you can see, for the space key there already is one solution implemented but both types of answers I have gotten so far don't work.

You can do it something like this
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '32') {
event.preventDefault();
}
});

Add this to your javascript:
let checkMouse = true
window.addEventListener("keydown", (e) => {
if(e.repeat) {
return;
}
if(e.which == 27 || e.which == 9) {
document.exitPointerLock();
checkMouse = false;
}
if(checkMouse) {
if(e.which == 87) { forwardPressed = true; }
if(e.which == 83) { backwardPressed = true; }
if(e.which == 65) { leftPressed = true; }
if(e.which == 68) { rightPressed = true; }
if(e.which == 32) { upPressed = true; event.stopPropagation(); event.preventDefault(); }
if(e.which == 16) { downPressed = true; }
}
if (e.which == 32) {
return !(e.keyCode == 32);
}
});
checkMouse wasn't initialised before. It's working fine here.

Keybinding a button that triggers its onclick function

I would like the left and right arrow keys to trigger the back and next button clicks in my Javascript. I feel like I'm not quite implementing it correctly since my buttons work but the keystrokes do not.
function init() {
flashmovie = document.getElementById('flashmovie');
document.getElementById('back').onclick = function () {
if (c == 0) {
c = paths.length;
}
c--
displayFiles();
}
document.getElementById('next').onclick = function () {
if (c == paths.length - 1) {
c = -1;
}
c++;
displayFiles();
}
document.keypress(function (e) {
if (e.which == 37) {
$("#back").click();
}
});
document.keypress(function (e) {
if (e.which == 39) {
$("#next").click();
}
});
}

You probably want the keydown event.
function init() {
document.getElementById('back').onclick = function() {
console.log('back!');
}
document.getElementById('next').onclick = function() {
console.log('next!');
}
document.addEventListener('keydown', function(e) {
if (e.which == 37) {
$("#back").click();
}
});
document.addEventListener('keydown', function(e) {
if (e.which === 39) {
$("#next").click();
}
});
}
init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="back">Back</button>
<button id="next">Next</button>
I guessed which event listener style you'd want (native DOM versus jQuery) because you've got a mix, but this should get you pointed in the right direction.
From experience, if you have more than a very simple use case for handling keypresses, I'd recommend utilizing a library, like Keypress.

Without jquery, try this
document.onkeyup = function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
}
With jquery,
$(document).keypress(function(e){
if (e.which == 37) {
$('#back').click();
} else if (e.which == 39) {
$('#next').click();
}
});

jquery keypress: trigger click when ctl+x and ctl+s

I am trying to update and close a popup by using keypress.
if keypress - ctl+s = save
if keypress - ctl+x = exit
$(window).keypress(function(event) {
if ((event.which == 120 && event.ctrlKey) || (event.which == 19)){
$(".ps-button-close",object_popup).click();
//alert("Keys down are Ctrl + x + Return");
} else if((event.which == 115 && event.ctrlKey) || (event.which == 19)) {
// Trigger click.
("form.ps-item-form.page input[type=submit][name=update]",object_popup).click();
} else {
return true;
}
event.preventDefault();
return false;
});
But they don't work at all...
Any ideas how I can combine them perfectly?
edit:
seems to get them worked now...
if ((event.which == 115 && event.ctrlKey) || (event.which == 19)) {
// Trigger click.
$("form.ps-item-form.page input[type=submit][name=update]",object_popup).click();
} else if ((event.which == 120 && event.ctrlKey) || (event.which == 19)){
// Trigger click.
$(".ps-button-close",object_popup).click();
//alert("Keys down are Ctrl + x + Return");
} else {
return true;
}

Use
$("form input[type=submit] [name=update]").trigger('click');

javascript prevent scrolling

I am trying to prevent scrolling when I use arrow keys in my HTML5 game. It is a maze game that you control with arrow keys or buttons on the screen, but whenever I press the 'up' or 'down' keys, it always scrolls.I am using:
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
} else if(e.keyCode === 38) {
up();
} else if(e.keyCode === 37) {
leftclick();
} else if(e.keyCode === 39) {
rightclick();
}
})
Is this possible with javascript? I want it to be able to scroll with my mouse, but not when I use arrow keys on my keyboard. My game is at http://thomaswd.com/maze. Please help. Thanks!

Use e.preventDefault() to prevent the normal key action from taking place.
document.addEventListener('keydown', function(e){
if(e.keyCode === 40) {
down();
e.preventDefault();
} else if(e.keyCode === 38) {
up();
e.preventDefault();
} else if(e.keyCode === 37) {
leftclick();
e.preventDefault();
} else if(e.keyCode === 39) {
rightclick();
e.preventDefault();
}
})

Try this:
document.addEventListener('keydown', function(e) {
if(e.keyCode > 36 && e.keyCode < 41) {
e.preventDefault();
}
if (e.keyCode === 40) {
down();
} else if (e.keyCode === 38) {
up();
} else if (e.keyCode === 37) {
leftclick();
} else if (e.keyCode === 39) {
rightclick();
}
return false;
}, false);
}

Try to add e.preventDefault(); at the end