Smoothly rotating an object in Three.js with a custom function

Question

Smoothly rotating an object in Three.js with a custom function

I successfully created a Rubik's Cube using Three.js, and everything is functioning as intended. However, I would like to add an animation when turning the cube instead of it snapping into place instantly. How can I achieve a smoother turning effect?

Below is the code snippet that I am currently using:

function turnOrangeSide(inverse) {
    let x = 0;
    let y = 1;
    let z = 1;
    orangeGroup = new THREE.Object3D();
    scene.add(orangeGroup);

    // The following lines group all parts of the Cube that need to be turned.
    orangeGroup.attach(getIntersecting(rotationPointO, x, y, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y, z - 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z + 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y + 1, z - 1));
    orangeGroup.attach(getIntersecting(rotationPointO, x, y - 1, z - 1));

    let rotation = Math.PI / 2
    if (inverse) rotation = -Math.PI / 2
    orangeGroup.rotation.x += rotation;
}

You can view a live example here.

javascript animation three.js rotation

Answer 1

Answer №1

One way to achieve a rotation effect on a cube is by utilizing a parametric equation and gradually rotating it around an axis. Here's an example implementation:

let fps = 60;           // frames per second
let duration = 2;       // 2 seconds
const step = 1 / (duration * fps);  // step per frame
const finalAngle = Math.PI/2;
const angleStep = finalAngle * step;
let time = 0;

function animateCube(time){
   if (time >= 1) return; // Animation completed
   time += step;  // Increment time
   cube.rotation.x += angleStep; // Rotate the cube
   requestAnimationFrame(() => animateCube(time));
}

animateCube(time);

Answer 2

One way to achieve a rotation effect on a cube is by utilizing a parametric equation and gradually rotating it around an axis. Here's an example implementation:

let fps = 60;           // frames per second
let duration = 2;       // 2 seconds
const step = 1 / (duration * fps);  // step per frame
const finalAngle = Math.PI/2;
const angleStep = finalAngle * step;
let time = 0;

function animateCube(time){
   if (time >= 1) return; // Animation completed
   time += step;  // Increment time
   cube.rotation.x += angleStep; // Rotate the cube
   requestAnimationFrame(() => animateCube(time));
}

animateCube(time);

Smoothly rotating an object in Three.js with a custom function

Answer №1

Similar questions

Triggering an Ajax call for form validation only occurs when the form is not validated

Large data sets may cause the Highchart Bar to not display properly

What sets apart gzip from x-gzip content? And how can I decompress x-gzip specifically? zlib appears to be struggling

Challenges Associated with Promises in JavaScript

There appears to be an issue with the functionality of the external CSS pathway

Using a Javascript array within a Bootstrap carousel allows for dynamic content to

Storing the output of asynchronous promises in an array using async/await technique

only one of the ng-bind-html elements on the page is functioning

JavaScript toggle display function not functioning properly when clicked

At times, MomentJS may miscalculate and add an incorrect number of hours

Firefox compatibility issue caused by jQuery's appendTo function disrupting hyperlink functionality

"Implementing a select value in React.js using option values and mapping through iterations, with the

Is there a way to include custom headers in the response of socket.io using express.js?

compress a website to display advertisement

Determine the total of the final column in recently added rows by utilizing JavaScript

Checking for mobile SSR in a ReactJS applicationUncover the signs of mobile

Strategies for organizing your week with a calendar

What is the best way to implement client-side shopping cart calculations using jQuery?

executing a hook within _app.tsx in Next.js

Using Python Webdriver to Execute JavaScript File and Passing Arguments to Functions