javascript - Three.js:如何在 animate 循环中的 3 个动画序列状态之间平滑过渡

Question

我试图让 3 个不同的翅膀扑动序列的转换在短时间内顺利发生。现在他们只是从一种状态跳到另一种状态。翅膀拍动有3种状态，1)在地面上。 2)飞起来。 3)飞落。这很令人困惑，因为循环中的任何内容都会循环，但这将是每次状态更改时的平滑一次性转换。有什么想法可以实现这一点吗？

Here's a plunker

相关的JS如下:

Pig.prototype.updateWingsFly = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 4 + Math.cos(this.wingAngle) * this.wingAmplitude;
    this.wingR.rotation.z = Math.PI / 4 - Math.cos(this.wingAngle) * this.wingAmplitude;
}

Pig.prototype.updateWingsDescend = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 2 + Math.cos(this.wingAngle) * this.wingAmplitude / 4;
    this.wingR.rotation.z = Math.PI / 2 - Math.cos(this.wingAngle) * this.wingAmplitude / 4 ;
}

Pig.prototype.updateWingsRest = function() {
    this.wingAngle += this.wingSpeed/globalSpeedRate;
    this.wingL.rotation.z = -Math.PI / 4 + Math.cos(this.wingAngle) * this.wingAmplitude / 8;
    this.wingR.rotation.z = Math.PI / 4 - Math.cos(this.wingAngle) * this.wingAmplitude / 8;

}

function loop(){
    render();
    var xTarget = (mousePos.x-windowHalfX);
    var yTarget= (mousePos.y-windowHalfY);
    pig.look(xTarget, yTarget);
    getFlyPosition();


    if (objectHeight === 0){
          pig.updateWingsRest();
          } else if (isFlyingUp){
          pig.updateWingsFly();
          } else {
          pig.updateWingsDescend();
    }
    requestAnimationFrame(loop);
}

Answer 1

Tween.js 是您的解决方案。它用于以平滑的方式更改变量的值，并且非常适合平滑 3DObjects 动画。

http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/