Modify object rotation animation direction using keyboard controls in Three.js

Question

Modify object rotation animation direction using keyboard controls in Three.js

Adjusting the object rotation direction with key controls is within my capability by utilizing the following code:

 case 37:
      scene.rotation.x -= 0.01;
      break
 case 38:
      scene.rotation.z -= 0.01
      break

Nevertheless, the rotation remains discrete in this scenario, which means that once I release the keyboard keys, the rotation of my scene ceases as well. Is there a method to modify the rotation direction based on keyboard input while sustaining the animation using requestAnimationFrame in the render function?

javascript three.js rotation requestanimationframe

Answer 1

Answer №1

0) One must keep track of the object's rotational speed:

mesh.rotSpeed = { x: 0, y: 0};

1) To adjust the rotation speed around a specific axis, simply click on the arrows:

switch (e.keyCode){
    case 37:
      mesh.rotSpeed.x += 0.01;
      break;
    case 39:
      mesh.rotSpeed.x -= 0.01;
      break;               
    case 38:
      mesh.rotSpeed.y +=0.01;
      break;
    case 40:
      mesh.rotSpeed.y -=0.01;
      break;                
}

2) During the animation loop, rotate the object at the desired speed around the axes:

mesh.rotation.x += mesh.rotSpeed.x;
mesh.rotation.y += mesh.rotSpeed.y;

Link to JSFiddle

Answer 2

0) One must keep track of the object's rotational speed:

mesh.rotSpeed = { x: 0, y: 0};

1) To adjust the rotation speed around a specific axis, simply click on the arrows:

switch (e.keyCode){
    case 37:
      mesh.rotSpeed.x += 0.01;
      break;
    case 39:
      mesh.rotSpeed.x -= 0.01;
      break;               
    case 38:
      mesh.rotSpeed.y +=0.01;
      break;
    case 40:
      mesh.rotSpeed.y -=0.01;
      break;                
}

2) During the animation loop, rotate the object at the desired speed around the axes:

mesh.rotation.x += mesh.rotSpeed.x;
mesh.rotation.y += mesh.rotSpeed.y;

Link to JSFiddle

Modify object rotation animation direction using keyboard controls in Three.js

Answer №1

Similar questions

"Encountering a delay in the passport authentication callback process

Can a MS Teams Bot be triggered to show a botMessagePreview from a task or submit activity rather than a composeExtension or submitAction activity?

Refresh the table dynamically in Django without the need to reload the entire page

Utilizing ThreeJS: Establishing microphone as audio source

Transform the default WordPress gallery into a stunning slideshow with FlexSlider 2 integration

Using the `setTimeout` function to swap components

Tips for customizing table cell styling in editable cells with React material table

Storing data values from a specific object key into an array in Vue: Step-by-step guide

Exploring Angular 4's Capabilities: Navigating a Multi-Dimensional Array

"Click events on jQuery's cloned elements are not retained when the elements are removed and appended to a container for the second time

Failed to retrieve the item stored in the local storage

prismjs plugin for highlighting code displays code in a horizontal format

Guide on incorporating markdown in an ejs template

What is the best way to set a default value for a specified Date format retrieved from an API?

tips for implementing JSON loading in Ext JS

Angular 4 - Automatically scroll to specific list item based on search query input

Troubles arising while submitting data from AngularJS to Amazon S3

Showing the number of times a button has been pressed

If the LocalStorage value is empty, relocate to a different location

What could be causing my Ajax JSON data to not return accurately despite appearing correctly in the console logs?