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, Oct 23 '15 at 12:34

score 3 · Accepted Answer · edited May 23 '17 at 10:27

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 '17 at 10:27

Community

1
1

answered Oct 23 '15 at 12:29

Adam Finley

1,550
1
16
28

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 :( – Ian Steffy Oct 23 '15 at 12:38
1

@IanSteffy sure! I edited my post with some code to do it in Three only. – Adam Finley Oct 23 '15 at 13:24
The solution without Tween works however, I have not tested the Tween solution. I hope someone else will. – Ian Steffy Oct 27 '15 at 11:16

Animate object's size in THREEjs

1 Answers1