CODEWITHSUNDEEP
javascriptthree.jscreatejstween
Scott Thiessen
Scott Thiessen

Reputation: 875

Increase frame rate of CreateJS's TweenJS for use w/ three.js

I'm using CreateJS's TweenJS in a 60fps three.js project. I'm noticing the animation feels jerky when I use TweenJS to move objects, as if the objects are being updated at a lower frame rate.

Here is an example: https://jsfiddle.net/sccottt/sbm9s6k5/1/

In the example, the box (animated w/ TweenJS) seems to move much less smoothly than the lines in the background (rotating per requestAnimationFrame()).

Is there a way to change the frame rate of TweenJS, or does anyone have any idea on how to make this perform more smoothly?

Upvotes: 1

Views: 1736

Answers (2)

Lanny
Lanny

Reputation: 11294

The latest version of CreateJS that JSFiddle will host is fairly old (end of 2013). Since then, there is RequestAnimationFrame support (now used as the default timing mode).

I updated your fiddle, to use the latest (0.6.1, tagged on May 21) with RAF, and it seems much smoother. https://jsfiddle.net/sbm9s6k5/4/

createjs.Ticker.timingMode = createjs.Ticker.RAF;

Upvotes: 3

gaitat
gaitat

Reputation: 12632

Just to note the tweenjs.min.js library that you include in your fiddle is not actually being used as you might think. Instead the createjs version is being used.

Anyway I went with the original tween.js which is under three.js/examples/libs/tween.min.js and did a rewrite of your tween code and I believe the result is much smoother.

setInterval( function()
{
    var trgt    = randomV3();

    new TWEEN.Tween( _someone.position )
        .to( { x: trgt.x, y: trgt.y, z: trgt.z }, 2000 )
        .easing( TWEEN.Easing.Quadratic.InOut )
        .onUpdate( function() {
            _someone.position.set( this.x, this.y, this.z );
        } )
        .start()
    ;
}, 2250 );

fiddle at https://jsfiddle.net/2v4tqaux/

Upvotes: 1

Related Questions