相对于另一个物体旋转

Question

我正在制作一个基本的Three.js应用程序 我的目标之一是使月球与地球保持一致.虽然我确实有一种方法可以静止地使它旋转成圆形,但如果你在行星周围移动,月球的旋转将开始奇怪地执行 - 以椭圆形状进行,直到几次旋转回来.

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

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网站上,您将找到大量此方法的示例.

你甚至可以更进一步.这种设置通常被称为场景图,其中每个孩子相对于其父母被定位,旋转和缩放.汽车的场景图可能看起来像这样

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/