相对于另一个物体旋转答案

【问题标题】：rotating relative to another object相对于另一个物体旋转
【发布时间】：2014-03-15 07:31:14
【问题描述】：

我正在制作basic Three.js application 我的目标之一是让月球与地球对齐。虽然我确实有一种方法可以静态让它绕一圈旋转，但如果你绕着地球移动，月亮的旋转就会开始奇怪地执行——变成椭圆形，直到几秒钟后赶上革命。

它的逻辑可以在以下函数中找到：

rotateMoon = function(rotSpeed) {
  var x = moon.position.x,
      y = moon.position.y,
      z = moon.position.z;
  moon.position.x = x * Math.cos(rotSpeed) + z * Math.sin(rotSpeed);
  moon.position.z = z * Math.cos(rotSpeed) - x * Math.sin(rotSpeed);
}

我的目标是把它“钩”在地球上；也就是说，它的运动依赖于地球的运动。这将如何实现？

【问题讨论】：

这可能超出您的需要，但您是否考虑过使用场景图 (en.wikipedia.org/wiki/Scene_graph)？
你没有使用 WebGL，你使用的是three.js。对于 three.js 而不是 webgl 的答案非常不同

标签： javascript math three.js game-physics

【解决方案1】：

我建议你使用THREE.js，这个东西很容易做到。

在这种情况下，您可以像孩子一样为另一个对象存储一个对象，地球可以是月球的父对象。

代码如下所示：

var earth = new THREE.Mesh(e_geometry, e_material);
var moon = new THREE.Mesh(m_geometry, m_material);
moon.position.x = 100;
earth.add(moon);

在更新方法或函数中：

earth.rotation.y += 0.01;

在 THREE.js 网站上，您会发现大量这种方法的示例。

您甚至可以更进一步。这种设置通常被称为场景图，其中每个子元素都相对于其父元素进行定位、旋转和缩放。汽车的场景图可能如下所示

car
|
+--left front wheel
|
+--right front wheel
|
+--left rear wheel
|
+--right rear wheel

您可以通过使车轮成为汽车的子级来做到这一点。在 three.js 中会是

car.add(leftFrontWheel);
car.add(rightFrontWheel);
car.add(leftRearWheel);
car.add(rightRearWheel);

此时，移动汽车也会移动车轮。

在行星的情况下，虽然您需要额外的节点，但您需要围绕地球旋转卫星，同时分别旋转地球和月球。如果你的场景图是这样的

earth
|
+--moon

月球的轨道将直接与地球的自转相关联。如果你这样做

earthBase (invisible)
|
+--earth
|
+--moonBase (invisible)
   |
   +--moon

然后你可以旋转earth让地球自转，你可以旋转moonBase让月球绕地球公转，你可以旋转moon让月亮自转。

要使 earthBase 和 moonBase 使用类似的东西

var earthBase = new THREE.Object3D();
var moonBase = new THREE.Object3D();

然后设置层次结构

earthBase.add(earth);
earthBase.add(moonBase);
moonBase.add(moon);

设置月球轨道半径

moon.position.z = radiusOfMoonsOrbit;

制作月球轨道

moonBase.rotate.y += angularSpeedOfOrbit;

让地球和月亮一起旋转

earth.rotate.y += earthRotationalSpeed;
moon.rotate.y += moonRotationalSpeed;

这是一个小提琴http://jsfiddle.net/greggman/uY8Ce/

【讨论】：