我试图让 3 个不同的翅膀扑动序列的转换在短时间内顺利发生。现在他们只是从一种状态跳到另一种状态。翅膀拍动有3种状态,1)在地面上。 2)飞起来。 3)飞落。这很令人困惑,因为循环中的任何内容都会循环,但这将是每次状态更改时的平滑一次性转换。有什么想法可以实现这一点吗?
相关的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);
}
最佳答案
Tween.js 是您的解决方案。它用于以平滑的方式更改变量的值,并且非常适合平滑 3DObjects 动画。
http://learningthreejs.com/blog/2011/08/17/tweenjs-for-smooth-animation/
关于javascript - Three.js:如何在 animate 循环中的 3 个动画序列状态之间平滑过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32110187/