javascript - 我正在尝试围绕另一个已经在轴上旋转的 (THREE.mesh) 3d 对象进行旋转。任何指针？

Question

我正在寻找一种方法，让卫星绕着我的行星运行，而我的行星又绕着我的太阳运行。

(three.js中的都是3d对象)

我已经定义了我所有的物体，目前地球绕着我的太阳旋转，但我很难让月球绕着已经旋转的地球旋转。

sun = models['sun'];
earth = models['earth'];
moon = models['moon'];

let suns = new THREE.Group();
suns.add(sun);

let planets = new THREE.Group();
planets.add(earth);

let moons = new THREE.Group();
moons.add(moon);

scene.add(sun);
scene.add(earth);
scene.add(moon);

var orbit = 3;
var date = Date.now() * 0.0005;

earth.position.set(Math.cos(date) * orbit, 0, Math.sin(date) * orbit);

earth.rotation.y += 0.01*animation_speed;
moon.rotation.y += 0.01*animation_speed;

预期:地球围绕太阳旋转(静态)，而月球在围绕太阳旋转时也围绕地球旋转。

当前:地球围绕太阳旋转。不确定如何处理月亮...

Answer 1

如果你为你的对象创建一个层次结构会很容易，这样它们就会围绕它们的父级旋转。

首先请注意，您的组根本不做任何事情:如果您调用 suns.add(sun) 然后调用 scene.add(sun)，第二次调用从 suns 中移除 sun 并将其添加到 scene，因此您的组为空。所以在下面的例子中，我们不会使用组。

F.E.

const sun = models['sun'];
const earth = models['earth'];
const moon = models['moon'];

const sunContainer = new THREE.Object3D
sunContainer.add(sun)
const earthContainer = new THREE.Object3D
earthContainer.add(earth)
const moonContainer = new THREE.Object3D
moonContainer.add(moon)

scene.add(sunContainer); // sunContainer is child of scene
sunContainer.add(earthContainer); // earthContainer is child of sunContainer
earthContainer.add(moonContainer); // moonContainer is child of earthContainer

var earthOrbitRadius = 3;
var moonOrbitRadius = 0.2;

// position them at their orbit radius (relative to their parents)
earthContainer.position.set(earthOrbitRadius, 0, 0);
moonContainer.position.set(moonOrbitRadius, 0, 0);

// each planet rotates around its poles
sun.rotation.y += 1*animation_speed;
earth.rotation.y += 1*animation_speed;
moon.rotation.y += 1*animation_speed;

// and each planet orbits around its parent
sunContainer.rotation.y += 0.1*animation_speed;
earthContainer.rotation.y += 0.1*animation_speed;

现在将这些位恢复到您的代码中，根据需要调整数字，它应该会像想要的那样工作。

还有其他方法可以做到，这只是一种方法。要使行星旋转独立于轨道旋转，您可以使用负轨道旋转调整行星旋转。或者，您可以让容器绕轨道运行，然后将太阳、地球和月亮直接添加到场景而不是容器，然后将容器位置复制到它们，同时它们独立旋转。或者您可以使用物理引擎(Bullet Physics 内置于 Three.js 中)。或者你可以使用 pivot points .

顺便说一下，如果您发布工作代码会有所帮助。 :)