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，这件事很容易做到。

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

代码将如下所示：

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网站上，你会发现大量这种方法的例子。

您甚至可以更进一步。这种设置通常称为 scenegraph ，其中每个子项相对于其父项进行定位，旋转和缩放。汽车的场景图可能看起来像这样

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/

相对于另一个物体旋转

1 个答案: