增加 CreateJS Tween JS 的帧率，以与/three.js 一起使用答案

【问题标题】：Increase frame rate of CreateJS's TweenJS for use w/ three.js增加 CreateJS Tween JS 的帧率，以与/three.js 一起使用
【发布时间】：2015-06-03 22:50:01
【问题描述】：

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

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

在示例中，框（使用 TweenJS 进行动画处理）的移动似乎远不如背景中的线条流畅（根据 requestAnimationFrame() 旋转）。

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

【问题讨论】：

你能用三的统计插件构建这个吗，或者显示帧速率的东西？与功能区相比，您的机器人和答案中的演示仍然显得迟钝。我对 cratejs 不太了解，但我看了一下ticker 类。理想情况下，您希望每次渲染时都更新补间 - 在渲染循环中。我怀疑你的帧速率是 60，但是补间和三不同步。

标签： javascript three.js createjs tween

【解决方案1】：

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

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

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

【讨论】：

为了与现有内容兼容，Ticker 仍然使用 TIMER（即 setTimeout）作为默认计时模式。否则兰尼的答案是正确的。

【解决方案2】：

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

无论如何，我使用了位于 three.js/examples/libs/tween.min.js 下的原始 tween.js，并重写了您的 tween 代码，我相信结果会更流畅。

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/

【讨论】：

steel 相比于旋转的色带显得迟钝，我认为这是在适当的时候调用 TWEEN.update() 的问题，但我对 createjs 了解不多
Create.js 没有 tween.update 方法。一切都封装在您正在使用的一个调用中。无论如何，您正在尝试比较简单的旋转，即矩阵乘法，带插值。我会说苹果和橙子。
@gaitat - 我确实注意到了不同之处。我希望使用 createjs 版本，因为我已经在项目中大量使用它，我更喜欢语法，但看起来 tween.js 可以工作。
我想说的是，在每个渲染滴答声中，你应该更新你的位置和旋转。您是说旋转和插值的比较导致了这种差异吗？我是说，如果设计正确，如果有任何重物撞击 cpu，整个帧都会滞后。这是一个非常简单的问题。您需要更新补间，同时更新所有 3d 内容，然后进行渲染。这两个不同步。如果 create.js 没有这个或类似的方法，请不要使用 create.js。