Move the camera left and right, up and down using the arrow keys in WebGL

Question

Move the camera left and right, up and down using the arrow keys in WebGL

I am currently working on implementing a basic camera movement system in WebGL using JavaScript and the keyboard to control the camera's movement along the X and Y axes. However, I am facing an issue where the camera moves in world coordinates rather than relative to its own X and Y axes, resulting in a lack of realistic movement and inconsistencies based on the camera's orientation.

Below is some code snippet I have been using (I am unsure if the "updateprojectionmatrix" line is necessary in this context):

var arrow = { left: 37, up: 38, right: 39, down: 40 };
    var delta = 100;
    switch (event.which) {
        case arrow.left:
            camera.position.x = camera.position.x - delta;
            camera.updateProjectionMatrix();
            break;
        case arrow.up:
            camera.position.y = camera.position.y + delta;
            camera.updateProjectionMatrix();
            break;
        case arrow.right:
            camera.position.x = camera.position.x + delta;
            camera.updateProjectionMatrix();
            break;
        case arrow.down:
            camera.position.y = camera.position.y - delta;
            camera.updateProjectionMatrix();
            break;
    }

javascript three.js webgl

Answer 1

Answer №1

Explore this informative piece on cameras in WebGL

The article explains how a camera, represented by a look at matrix, is computed as shown below:

+----+----+----+----+
| Xx | Xy | Xz |  0 |  <- x axis
+----+----+----+----+
| Yx | Yy | Yz |  0 |  <- y axis
+----+----+----+----+
| Zx | Zy | Zz |  0 |  <- z axis
+----+----+----+----+
| Tx | Ty | Tz |  1 |  <- camera position
+----+----+----+----+

This enables moving the camera along its current view plane by adding the camera's world x-axis and/or y-axis to its position.

In three.js, the following code snippet can achieve this:

  var arrow = { left: 37, up: 38, right: 39, down: 40 };
  var delta = 0.05;
  var xAxis = new THREE.Vector3(
      camera.matrixWorld.elements[0], 
      camera.matrixWorld.elements[1], 
      camera.matrixWorld.elements[2]);
  var yAxis = new THREE.Vector3(
      camera.matrixWorld.elements[4], 
      camera.matrixWorld.elements[5], 
      camera.matrixWorld.elements[6]);

  switch (event.keyCode) {
    case arrow.left:
      camera.position.addScaledVector(xAxis, -delta);
      break;
    case arrow.up:
      camera.position.addScaledVector(yAxis, delta);
      break;
    case arrow.right:
      camera.position.addScaledVector(xAxis, delta);
      break;
    case arrow.down:
      camera.position.addScaledVector(yAxis, -delta);
      break;
  }

Below is a working example:

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Rest of the Three.js scene setup and camera movement functionality...

Furthermore, Three.js provides a translateOnAxis function for camera movement along specific axes. The code snippet below demonstrates this:

var arrow = { left: 37, up: 38, right: 39, down: 40 };
var delta = 0.05;
var xAxis = new THREE.Vector3(1,0,0);
var yAxis = new THREE.Vector3(0,1,0);

window.addEventListener('keydown', function(event) {
  event.preventDefault();
  switch (event.keyCode) {
    case arrow.left:
      camera.translateOnAxis(xAxis, -delta);
      break;
    case arrow.up:
      camera.translateOnAxis(yAxis, delta);
      break;
    case arrow.right:
      camera.translateOnAxis(xAxis, delta);
      break;
    case arrow.down:
      camera.translateOnAxis(yAxis, -delta);
      break;
  }
});

Here is a working example with the provided code:

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Rest of the Three.js scene setup and camera movement functionality...

Answer 2

Explore this informative piece on cameras in WebGL

The article explains how a camera, represented by a look at matrix, is computed as shown below:

+----+----+----+----+
| Xx | Xy | Xz |  0 |  <- x axis
+----+----+----+----+
| Yx | Yy | Yz |  0 |  <- y axis
+----+----+----+----+
| Zx | Zy | Zz |  0 |  <- z axis
+----+----+----+----+
| Tx | Ty | Tz |  1 |  <- camera position
+----+----+----+----+

This enables moving the camera along its current view plane by adding the camera's world x-axis and/or y-axis to its position.

In three.js, the following code snippet can achieve this:

  var arrow = { left: 37, up: 38, right: 39, down: 40 };
  var delta = 0.05;
  var xAxis = new THREE.Vector3(
      camera.matrixWorld.elements[0], 
      camera.matrixWorld.elements[1], 
      camera.matrixWorld.elements[2]);
  var yAxis = new THREE.Vector3(
      camera.matrixWorld.elements[4], 
      camera.matrixWorld.elements[5], 
      camera.matrixWorld.elements[6]);

  switch (event.keyCode) {
    case arrow.left:
      camera.position.addScaledVector(xAxis, -delta);
      break;
    case arrow.up:
      camera.position.addScaledVector(yAxis, delta);
      break;
    case arrow.right:
      camera.position.addScaledVector(xAxis, delta);
      break;
    case arrow.down:
      camera.position.addScaledVector(yAxis, -delta);
      break;
  }

Below is a working example:

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Rest of the Three.js scene setup and camera movement functionality...

Furthermore, Three.js provides a translateOnAxis function for camera movement along specific axes. The code snippet below demonstrates this:

var arrow = { left: 37, up: 38, right: 39, down: 40 };
var delta = 0.05;
var xAxis = new THREE.Vector3(1,0,0);
var yAxis = new THREE.Vector3(0,1,0);

window.addEventListener('keydown', function(event) {
  event.preventDefault();
  switch (event.keyCode) {
    case arrow.left:
      camera.translateOnAxis(xAxis, -delta);
      break;
    case arrow.up:
      camera.translateOnAxis(yAxis, delta);
      break;
    case arrow.right:
      camera.translateOnAxis(xAxis, delta);
      break;
    case arrow.down:
      camera.translateOnAxis(yAxis, -delta);
      break;
  }
});

Here is a working example with the provided code:

var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// Rest of the Three.js scene setup and camera movement functionality...

Move the camera left and right, up and down using the arrow keys in WebGL

Answer №1

Similar questions

Calling functions in AngularJS/HTML can help you execute specific

Implementing React selectors to manage the state changes on page load and when a user

Tips for successfully passing an array containing multiple values within the jsPDF body

Tips on updating the $authProvider.loginUrl for Satellizer from an Angular controller

Looking for a character that includes both lowercase and uppercase letters

Tips for rearranging objects within a jsPDF document to prevent vertical overlap when a table grows in size

Unlocking two features with just a single tap

AngularJS: The power of dynamic HTTP POST parameter names

What is the best way to display an international phone number using Angular Material V6?

Node.js captures the Promise and provides detailed feedback

Add an input element to a form fieldset by employing vue

Steps for choosing an image and embedding it within a div element

The data input from the HTML is not being correctly transferred to the modal

Angular 2 template format standard

Is the functionality of this.value compatible with Firefox but not with Internet Explorer?

Rails - implementing ajax in partials causing an error: 'cannot find method render'

The JavaScript and CSS properties are not functioning properly with the HTML text field

Is there a quick way to use AJAX in Rails?

Implementing a blur effect on a CSS loader

Guide on importing CDN Vue into a vanilla Typescript file without using Vue CLI?