javascript - 转动对象,以便它们在 Three.js 中重置其 y 旋转

标签 javascript three.js rotation physijs

使用 Three.js,我正在创建一个游戏,其中的汽车根据其 y 旋转向特定方向移动。一个例子是 90 度。我使用 object.translateZ() 来插入它们前进,但遇到了问题。

我正在使用 phyjs 来模拟汽车。相互碰撞的汽车可能会改变它们的 y 轴旋转(因为碰撞),我想找到一种方法让汽车慢慢地将它们的旋转改变回原来的旋转,就像它们转身回到路上一样。没有这个,我的城市就会非常困惑。

这是我已经使用的代码(这只是其中的一部分):

var targetRotation = 90
var rotation = car.mesh.rotation.y * 180 / Math.PI //to convert to degrees

我想找到一种方法来慢慢改变汽车的旋转,使其与目标旋转相同。

感谢任何帮助! (但某种功能就更完美了)

最佳答案

我之前在其他系统(2D,而不是 Three.js)中做过类似的事情,基本上您想要做的就是逐渐增加 Angular ,直到达到距离足够接近的位置目标 Angular 。通常这意味着 float 小于您递增的转动速度(因此您不会“超出”该值)。

增量的大小取决于您希望它们转动的速度。

您还想检查是否增大 Angular 或减小 Angular (顺时针转动还是逆时针转动)是否更好,具体取决于您接近 360 度还是 0 度。这可以防止汽车“长时间”转动。您可以通过查看差异是否大于/小于 180 来了解这一点。

我们可以使用模运算符来获得 -360/360 之间的“真实” Angular 。

var currentAngle = car.mesh.rotation.y * 180 / Math.PI; //car's angle in degrees
var targetAngle = 90; //preferred angle *this time* ;)
var turningSpeed = 1; //one degree per update (wayyy to high for real stuff, usually)
currentAngle = currentAngle % 360; //get the 0-360 remainder
if ( Math.abs(targetAngle - currentAngle) >= turningSpeed) {
  var addto = 0
  if (targetAngle - currentAngle < 0) {
    addto = 360
  }
  if ( targetAngle - currentAngle + addto <= 180 ) { 
    currentAngle += turningSpeed;  
  }
  else {
     currentAngle -= turningSpeed;
  }
}
else { currentAngle = targetAngle; } //we're close enough to just set it
car.mesh.rotation.y = ( currentAngle * Math.PI ) / 180; // back to radians!

关于javascript - 转动对象,以便它们在 Three.js 中重置其 y 旋转,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41094092/

相关文章:

javascript - 使用 jQuery 的简单 AJAX HTTP GET

javascript - react 三渲染器多面体几何错误

javascript - 地球绕太阳转

ios - 我如何在 iOS 中为 ECSlidingViewController 构建 3D 转换?

Android:SensorManager.getRotationMatrix 和 SensorManager.getOrientation() 的算法

java - 相机应用程序将图像旋转 90 度

javascript - Eclipse JSON 格式

javascript - 表单验证验证后不会提交

javascript - Twitter Bootstrap Collapse 什么都不做

javascript - three.js - 将相机旋转链接到 div 内的移动设备移动