Animate object's size in THREEjs

Question

Using THREE.js I would like to animate the size of an object so it slowly shrinks into nothingness.

Using answers from Three.js - Animate object size I can change the size of an object, but this size change is instant and I want the change to happen over a period of time (3 seconds). Plus the question is old :)

This is my current code. backwardMeshOct is simply a THREE.Mesh(geometry, material):

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

      requestAnimationFrame(animate);

I've tried altering var time and what time is multiplied by but the result is still the same, an instant size scale on x.

Thanks for your help doods and doobs.

What about adding a setTimeout(function() { backwardMeshOct.scale.x = ... }, 3000) so that your scale changes after 3 seconds or a setTimeout(function() { time = /* a new value */ }, 3000) so that the time variable changes after 3 seconds ? — tforgione
– tforgione, Commented Oct 23, 2015 at 12:34

Community · Accepted Answer · 2017-05-23 10:27:06Z

3

You might find it easier to use a library like Tween.JS. You'll be able to define a starting value, a target value, and a time delta for the change!

Check out the answer to this question for how it can work with Three: Tween JS basics on three JS cube

If you aren't able to use Tween, try a THREE.Clock object to keep track of the time and scale your mesh appropriately. I made one in a global scope (before init) and then used it to count to 3 seconds:

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);

}

full example here: http://jsfiddle.net/adamfinley/ac6zxgt6/1/

edited May 23, 2017 at 10:27

CommunityBot

11 silver badge

answered Oct 23, 2015 at 12:29

Adam Finley

1,6201 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ian Steffy Over a year ago

I want the answer to be only using Three.js. I am not able to add Tween.JS in my current project due to restrictions from my employer :(

Adam Finley Over a year ago

@IanSteffy sure! I edited my post with some code to do it in Three only.

Ian Steffy Over a year ago

The solution without Tween works however, I have not tested the Tween solution. I hope someone else will.

Collectives™ on Stack Overflow

Animate object's size in THREEjs

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related