Javascript initial keypress delay for movement in 3D space

Question

Javascript initial keypress delay for movement in 3D space

I am aiming for a seamless movement experience when pressing a key - with the object initiating its movement upon the first press and then continuously moving while the button is held down.


//setting movement speeds
var xSpeed = 0.5;
var zSpeed = 0.5;

document.addEventListener("keydown", onDocumentKeyDown, false);

function onDocumentKeyDown(event) {
  var keyCode = event.which;
  if (keyCode == 87) {  //W KEY
    car.position.z -= zSpeed;
  } else if (keyCode == 83) {  //S KEY
    car.position.z += zSpeed;
  } else if (keyCode == 65) {  //A KEY
    car.position.x -= xSpeed;
  } else if (keyCode == 68) {  //D KEY
    car.position.x += xSpeed;
  } else if (keyCode == 32) {
    car.position.set(0, 0, 0);
  }
};

My goal is to smoothly control a GLTF imported model on a plane using keyboard inputs. I attempted to wrap the program in a loop and make the keyboard state available within that loop's scope but unfortunately ran into issues.

javascript three.js keycode gltf

Answer 1

Answer №1

One way to approach this scenario is by adjusting the velocity based on keyup/keydown events, with the loop updating the car's position accordingly.

// set initial movement speeds
var xSpeed = 0;
var zSpeed = 0;

document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keydown", onDocumentKeyUp, false);

function onDocumentKeyDown(event) {
  var keyCode = event.which;
  if (keyCode == 87) {  //W KEY
    zSpeed = -0.5;
  } ... // repeat for other keys
};


function onDocumentKeyUp(event) {
  var keyCode = event.which;
  if (keyCode == 87) {  //W KEY
    zSpeed = 0;
  } ... // repeat for other keys
};

function loop() {
car.position.z += zSpeed;
car.position.x += xSpeed;
window.requestAnimationFrame(loop);
}

If you prefer smoother acceleration and deceleration, you can adjust an acceleration factor in response to key events, with the loop managing the velocity changes.

For further exploration of simulating real-world concepts through code, check out Daniel Shiffman's insightful article:

Answer 2

One way to approach this scenario is by adjusting the velocity based on keyup/keydown events, with the loop updating the car's position accordingly.

// set initial movement speeds
var xSpeed = 0;
var zSpeed = 0;

document.addEventListener("keydown", onDocumentKeyDown, false);
document.addEventListener("keydown", onDocumentKeyUp, false);

function onDocumentKeyDown(event) {
  var keyCode = event.which;
  if (keyCode == 87) {  //W KEY
    zSpeed = -0.5;
  } ... // repeat for other keys
};


function onDocumentKeyUp(event) {
  var keyCode = event.which;
  if (keyCode == 87) {  //W KEY
    zSpeed = 0;
  } ... // repeat for other keys
};

function loop() {
car.position.z += zSpeed;
car.position.x += xSpeed;
window.requestAnimationFrame(loop);
}

If you prefer smoother acceleration and deceleration, you can adjust an acceleration factor in response to key events, with the loop managing the velocity changes.

For further exploration of simulating real-world concepts through code, check out Daniel Shiffman's insightful article:

Javascript initial keypress delay for movement in 3D space

Answer №1

Similar questions

Customizing the appearance of React Navigation StackNavigator through background color changes and styling

Using `ngRepeat` on a different array of values for repetition

Tips on leaving comments inside a render <div>

Currently seeking user coordinates for Vue implementation

What is the best way to dynamically load a local image in a React component by using the file path stored in an object attribute

leveraging AJAX to showcase information retrieved from a MySQL database

Efficiently and consistently refreshing the DOM with information while maintaining page integrity

When navigating using the next and back buttons, the active state in Angular is automatically removed

Can one determine if a webpage is being displayed within an Infragistics igDialog?

In Angular, you can easily modify and refresh an array item that is sourced from a JSON file by following these steps

The power of Ionic 2 combined with the Web Audio API

Ajax: The function assigned to the route does not get executed

How to make text dynamically shrink with TailwindCSS class 'flex-shrink-0'

Setting up jade includes with gulp-jade: A comprehensive guide

JavaScript stylesheet library

What would be the ideal technology stack (modules, frameworks) to use for delving into node.js and creating a successful first project that allows for learning and growth?

Transform the hue of symbols within D3-legend

Using the JQuery template with $.get function does not produce the desired result

Guide for ordering a query by the most recent updatedAt within a nested one to many relationship

I possess a webpage containing a div element that is loaded dynamically through ajax