Question

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

以下是一个示例：https://jsfiddle.net/sccottt/sbm9s6k5/1/

在示例中，框（动画w / TweenJS）似乎比背景中的线条移动得更不平滑（按<testResources> <testResource> <directory>src/test/resources</directory> </testResource> </testResources>旋转）。

有没有办法改变TweenJS的帧速率，或者有没有人知道如何让这种表现更顺畅？

Answer 1

JSFiddle将托管的最新版CreateJS相当陈旧（2013年底）。从那时起，RequestAnimationFrame支持~~（现在用作默认计时模式）~~。

我更新了你的小提琴，使用最新的（0.6.1，在5月21日标记）与RAF，它似乎更顺畅。 https://jsfiddle.net/sbm9s6k5/4/

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

Answer 2

请注意，您在小提琴中包含的tweenjs.min.js库实际上并未按您的想法使用。相反，正在使用createjs版本。

无论如何，我选择了原始的tween.js，它位于three.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 );

在https://jsfiddle.net/2v4tqaux/

小提琴

提高CreateJS的TweenJS的帧速率以使用w / three.js

2 个答案: