我刚刚写了一段代码来处理 THREE.js 场景中的对象旋转。但问题不是特定于 3D 的。
我希望我的对象(this)在每个函数调用时转动 0.25 弧度,直到它的旋转(this.clientRotation)达到 this.targetRotation 中定义的旋转。下面的代码是在渲染循环中不断调用的 update() 函数的内容。
我必须检查当前和目标旋转之间的绝对差是否高于每次调用的旋转量(0.25),以避免在几乎达到目标旋转时来回转动。
我必须检查旋转(以弧度为单位)差异是否高于 180 度,在这种情况下,最短的转弯将是相反的。
我必须检查更新后的旋转是否保持在 -PI 和 +PI(0 到 360 度)之间。
//Move only if we find a delta big enough between the target rotation and current rotation
//Rotation goes from -PI to +PI
this.rotationSpeed = 0.25;
var absDiff = Math.abs(this.clientRotation - this.targetRotation);
if(absDiff > this.rotationSpeed){
if(absDiff < Math.PI){
//Less than 180 degrees, turn towards the target
if(this.targetRotation > this.clientRotation) this.clientRotation += this.rotationSpeed;
if(this.targetRotation < this.clientRotation) this.clientRotation -= this.rotationSpeed;
} else {
//More than 180 degrees this way, so it is shorter to turn the other way
if(this.targetRotation > this.clientRotation) this.clientRotation -= this.rotationSpeed;
if(this.targetRotation < this.clientRotation) this.clientRotation += this.rotationSpeed;
}
//If rotation radians becomes more than a complete 360 turn, start again from 0
//If it goes below 0, start again down from 360
if(this.clientRotation > Math.PI) this.clientRotation -= Math.PI*2;
if(this.clientRotation < -Math.PI) this.clientRotation += Math.PI*2;
}
它有效,但似乎过于复杂。是否有更优化的方式来实现这种标准旋转行为?