增加 CreateJS 的 TweenJS 的帧率以供使用 three.js

Question

我在 60fps three.js 项目中使用 CreateJS 的 TweenJS。当我使用 TweenJS 移动对象时，我注意到动画感觉不稳定，好像对象正在以较低的帧速率更新。

这里有一个例子：https://jsfiddle.net/sccottt/sbm9s6k5/1/

在这个例子中，盒子（使用 TweenJS 动画）似乎比背景中的线条（每 requestAnimationFrame() 旋转）移动得更不平滑。

有没有办法改变 TweenJS 的帧率，或者有没有人知道如何使它的执行更流畅？

Answer 1

请注意，您在 fiddle 中包含的 tweenjs.min.js 库实际上并未像您想象的那样被使用。而是使用 createjs 版本。

无论如何，我使用了原来的 tween.js，它还不到三个。js/examples/libs/tween。min.js 并重写了您的补间代码，我相信结果会更流畅。

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 在 https://jsfiddle.net/2v4tqaux/

Answer 2

JSFiddle 将托管的最新版本的 CreateJS 相当旧（2013 年底）。此后，就有了RequestAnimationFrame的支持~~（现在作为默认的计时模式）~~.

我更新了你的 fiddle，使用最新的（0.6.1，5 月 21 日标记）和 RAF，看起来更流畅。 https://jsfiddle.net/sbm9s6k5/4/

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

增加 CreateJS 的 TweenJS 的帧率以供使用 three.js

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

javascript

three.js

createjs

tween