• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

199
Views
How do I slowly rotate a cube 90 degrees in three.js?

My current method of rotating the cube rotates it immediately. I would like to display a rotating motion so the user can see the rotation of the cube, as opposed to the sides of the cube immediately changing color when I hit key 'a', 'w', 'd', or 's'(since the rotation is immediate).

How do I make the cube rotate slowly?

The below code is currently how I am rotating the cube:

boxWidth = 1;
boxHeight = 1;
boxDepth = 1;

const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);

const materials = [
  new THREE.MeshBasicMaterial({color: 0x0000ff}),
  new THREE.MeshBasicMaterial({color: 0xffffff}),
  new THREE.MeshBasicMaterial({color: 0xffff00}),
  new THREE.MeshBasicMaterial({color: 0x008000}),
  new THREE.MeshBasicMaterial({color: 0xffa500}),
  new THREE.MeshBasicMaterial({color: 0xff0000}),
]

const cube = new THREE.Mesh(geometry, materials);

function onDocumentKeyDown(event) {
  console.log(event);
  if (event.keyCode == 87) { // w button
      cube.rotateX(Math.PI / 2);
  } else if (event.keyCode == 83) { // s button
      cube.rotateX(-Math.PI / 2); 
  } else if (event.keyCode == 65) { // a button
      cube.rotateY(-Math.PI / 2); 
  } else if (event.keyCode == 68) { // d button
      cube.rotateY(Math.PI / 2);
  }
};

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

almost 3 years ago · Santiago Trujillo
1 answers
Answer question

0

One approach to animate an orientation to another one is Quaternion.rotateTowards().

What you need to use this method is a source and a target orientation as well as the angular step which describes how fast your cube turns around. The below link shows the method's usage in small example. The relevant code section is in the animate() function and looks like so:

const delta = clock.getDelta();

if ( ! mesh.quaternion.equals( targetQuaternion ) ) {

    const step = speed * delta;
    mesh.quaternion.rotateTowards( targetQuaternion, step );

}

This code essentially means: As long as the mesh's orientation is not equal to the target orientation, perform a gradual transition from the current to the target orientation.

https://threejs.org/examples/webgl_math_orientation_transform

almost 3 years ago · Santiago Trujillo Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error