Animating the dimensions of objects in THREEjs

Question

Animating the dimensions of objects in THREEjs

In my project using THREE.js, I am aiming to create a captivating animation where an object gradually shrinks into nothingness.

After exploring solutions on Three.js - Animate object size, I found methods to adjust the size of an object. However, the changes occur instantly, and I desire a smooth transition over a 3-second interval. Additionally, it seems this question has been around for quite some time :)

The code snippet below showcases my current implementation. The 'backwardMeshOct' is simply a THREE.Mesh constructed with specific geometry and material:


var time = 20;
function animate() {
    backwardMeshOct.scale.x = Math.abs(Math.sin(time * 50));
}

requestAnimationFrame(animate);

Despite experimenting by adjusting the 'time' variable and its multiplier, I have not achieved the desired effect. The scaling on the x-axis remains instantaneous.

Your assistance in addressing this challenge would be greatly appreciated. Thank you, everyone!

javascript animation three.js scale

Answer 1

Answer №1

If you're looking for a simpler way to handle animations, consider using a library like Tween.JS. This allows you to set initial and target values along with a time duration for smooth transitions!

For a detailed explanation on how Tween.JS can be used with Three.js, check out this answer: Tween JS basics on three JS cube

In case you can't utilize Tween, another approach is to use a THREE.Clock object to manage time and adjust your mesh accordingly. You can create the clock globally and then update your mesh based on the elapsed time:

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    var t = clock.getElapsedTime();

    if (t >= 3.0) {
        clock = new THREE.Clock();
        mesh.scale.set(1, 1, 1);
    } else {
        mesh.scale.x = 1 - (t / 3.0);
        mesh.scale.y = 1 - (t / 3.0);
        mesh.scale.z = 1 - (t / 3.0);   
    }

    renderer.render(scene, camera);
}

See the complete example here: http://jsfiddle.net/adamfinley/ac6zxgt6/1/

Answer 2

If you're looking for a simpler way to handle animations, consider using a library like Tween.JS. This allows you to set initial and target values along with a time duration for smooth transitions!

For a detailed explanation on how Tween.JS can be used with Three.js, check out this answer: Tween JS basics on three JS cube

In case you can't utilize Tween, another approach is to use a THREE.Clock object to manage time and adjust your mesh accordingly. You can create the clock globally and then update your mesh based on the elapsed time:

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    var t = clock.getElapsedTime();

    if (t >= 3.0) {
        clock = new THREE.Clock();
        mesh.scale.set(1, 1, 1);
    } else {
        mesh.scale.x = 1 - (t / 3.0);
        mesh.scale.y = 1 - (t / 3.0);
        mesh.scale.z = 1 - (t / 3.0);   
    }

    renderer.render(scene, camera);
}

See the complete example here: http://jsfiddle.net/adamfinley/ac6zxgt6/1/

Animating the dimensions of objects in THREEjs

Answer №1

Similar questions

Cloning a file input does not retain the uploaded file in the cloned input. Only the original input retains the uploaded file

Is there a way to improve the efficiency of this jQuery function that toggles the image source?

Display a specific message in a div when the input field is left empty

IntelliJ is not able to detect certain JS libraries

The execution of babel-node falters while the babel cli functions flawlessly

"Incorporating JSON and Ajax to dynamically populate one select based on the selection in another select

New example of how to use the "useSession" syntax in Next Auth

The map function is not functioning properly following a state update in React

Step-by-step guide on how to prioritize rendering the login page before the ngView in AngularJS in order to

Issue with Translate3d functionality in fullpage.js not functioning as expected

Using Jquery to set values for css properties

How can I intercept/manage the back button of the browser in React-router?

Preventing audio from being muted using JavaScript requires the removal of audio tags through a MutationObserver

The alignment of the 3D STL object is not adjusting properly when zooming in with Three.js

A guide on organizing nested JSON objects in JavaScript

CloudFront for Amazon - Limit MP3 playback to designated website

Configuring the baseUrl for Axios in a Vue.js application triggers the sending of a request

Methods for validating ajax response with Jasmine

What issues could potentially arise from utilizing the MIME type application/json?

What is the method for showcasing an array using AngularJs in my specific scenario?