javascript - 相对于另一个物体旋转

Question

我正在制作 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);
}

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

Answer 1

我建议你使用THREE.js ，这件事用它做起来很容易。

在这种情况下，您可以将一个对象存储为另一个对象的 child 。

代码如下所示:

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;

这是一把 fiddle http://jsfiddle.net/greggman/uY8Ce/