Javascript I'；我试着绕着另一个已经在轴上旋转的物体旋转一个（3.mesh）3d物体。有什么建议吗？

我正在寻找一种方法，使一个绕着我的太阳运行的月球绕着我的行星运行

（所有这些都是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;

预期：地球围绕太阳旋转（静态），而月球围绕地球旋转，因为它围绕太阳旋转

---

电流：地球绕太阳旋转。不知道如何处理月亮…

如果你为你的对象建立一个层次结构，这样它们就可以绕着它们的父对象旋转

首先请注意，您的组是没有意义的。如果您调用

suns.add（sun）

，然后调用

scene.add（sun）

，第二个调用将

sun

从

suns

中删除并添加到

场景

，因此您的组为空。因此，在下面的示例中，我将不使用组

F.e

const sun=models['sun']；
const earth=模型[‘earth’]；
const moon=模型[‘moon’]；
const suncainer=new THREE.Object3D
suncainer.add（sun）
const earthContainer=new THREE.Object3D
earthContainer.add（地球）
const moonContainer=new THREE.Object3D
添加（moon）
场景。添加（日光容器）；//Suncainer是场景的孩子
suncainer.add（earthContainer）；//earthContainer是Suncainer的子公司
earthContainer.add（moonContainer）；//moonContainer是earthContainer的子代
var地球轨道半径=3；
var月球轨道半径=0.2；
//将它们放置在其轨道半径处（相对于其父对象）
earthContainer.position.set（地球轨道半径，0,0）；
moonContainer.position.set（moonOrbitRadius，0,0）；
//每颗行星都绕着它的两极旋转
sun.rotation.y+=1*动画速度；
地球自转y+=1*动画速度；
moon.rotation.y+=1*动画速度；
//每颗行星都绕着它的母行星运行
suncainer.rotation.y+=0.1*动画速度；
earthContainer.rotation.y+=0.1*动画速度；

现在将这些位恢复到代码中，根据需要调整数字，它的工作原理应该与您想要的类似

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

---

顺便说一句，如果您发布工作代码，会有所帮助。：）

我开发了一个简单的例子来说明

THREE.Object3D

的层次结构，以及儿童如何与其“父母”及其位置和旋转相关

var scene=new THREE.scene（）；
var aspect=window.innerWidth/window.innerHeight；
var摄像机=新的三视角摄像机（75，纵横比，0.11000）；
var renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
forEach（d=>create（d，场景））
添加（球体（{半径：5，环绕：0}））
函数创建（d，目标）{
var o=新的三个.Object3D（d.name）；
o、 添加（轨道（d））；
设p=球面（d）
o、 加（p）；
d、 satellites和d.satellites.forEach（d1=>create（d1，p））
目标。添加（o）；
d、 o=o；
}
功能轨道（d）{
var o=new THREE.Object3D（'orbit'+d.name）；
o、 rotateX（数学PI/2）；
o、 添加（新的三行（
新三.圆几何（d.orbit，64），
新的三线基本材质（{color:0xffffff}））；
返回o；
}
函数球（d）{
var o=new THREE.Object3D（'sphere'+d.name）；
o、 添加（新的三个网格（
新的三点球面法（d半径，16,16），
新的3.MeshBasicMaterial（{
颜色：0x2980b9，线框：真
})));
o、 translateX（d.orbit）
返回o；
}
var grid=新的三个.GridHelper（5001000x66660x4444）
旋转网格（数学PI/2）；
场景.添加（网格）；
摄像机位置设置（5,5,0）；
新的三个.轨道控件（摄影机、渲染器.doElement）；
设t=0；
函数渲染（dt）{
设t2=dt-t；
请求动画帧（渲染）；
渲染器。渲染（场景、摄影机）；
solarsystem.forEach（upd）
t=dt；
功能upd（d）{
d、 o.旋转（t2/10000*d.速度）；
d、 卫星和d.satellites.forEach（upd）
}
}
请求动画帧（渲染）
主体，画布{
保证金：0；
宽度：100%；
身高：100%；
溢出：隐藏；
背景色：黑色；
}

让solarsystem=[{
名称：“地球”，半径：2，轨道：30，速度：2，
卫星：[{
名称：“月球”，半径：1，轨道：6，速度：1，
}]
}, {
名称：“火星”，半径：2，轨道：50，速度：1，
卫星：[{
名称：“火卫一”，半径：0.5，轨道：3，速度：1，
}, {
名称：“deimos”，半径：0.5，轨道：4，速度：3，
}]
}];
非常感谢，这确实帮助我朝着正确的方向前进，最终建立了我的代码。抱歉，如果我的第一个问题不是非常详细，这是我关于堆栈溢出的第一篇文章：P