How to get objects to rotate on a vertical axis and around another object

Questions
1

My project consists of a planet earth and moon that rotate around the sun. (They aren’t specifically rotating around the sun, it’s more just around the 0,0 axis where the sun happens to be).

I initially created my geometries and then added them into the scene and then into the orbit group as follows

var orbitGroup = new THREE.Object3D();
                scene.add(orbitGroup); 

            scene.add(planetEarth);
            orbitGroup.add(planetEarth);
            scene.add(planetMoon);
            orbitGroup.add(planetMoon);

I then declared the rotation within the render function as follows

var angle = 0;
                render();

                function render() {
                    stats.update();

                     // rotate the orbit group
                    angle += 0.02;
                    orbitGroup.rotation.y = -angle / 10;

As you can tell, the moon and the earth are both orbiting around the sun instead of the moon rotating the earth while it rotates the sun. Is there a way I can declare the specific point or object that it should orbit and also make it orbit it at whatever axis I want rather than specifically on the y axis?

2

Have you tried earth.add( moon )?

1 Like
3

@looeee In what context would I use that in? and how would that enable the moon to rotate around the earth?

4

I’ve added that bit of code, the moon does seem to orbit around the earth now but it has added quite a large distance between it, have you any idea how I can make it closer to the earth? (https://imgur.com/a/zqYsEKa)

Also how exactly is that line of code making it work that way? It seems so simple

5

/cc

6

That works because transformations of 3D objects (changes of position, rotation and scale) can be hierarchical. So the transformation of parents also affects their children. In this way, it’s much easier to achieve things like mentioned in your first post.

Changing the y property of Object3D.rotation, you can use the method Object3D.rotateOnAxis(). The first vector is a normalized 3D vector defining your axis in object/local space.

1 Like
7

I might’ve phrased myself badly, but instead of it rotating on the spot, I mean the moon should make a full orbit around the earth, but diagonally if that makes sense? because for now it’s only orbiting in circles around it but it’s in a flat orbit on the y axis.

8

I asked that question on stack overflow but couldn’t get a reply so thought I’d repeat it here, apologies if it caused a confusion

9

It’s okay to post at stackoverflow too but it would be nice if you can link to your question so it’s easier to see what other developers already responded.

11

@Mugen87 I’ve created a gif to show a portion of how my scene operates, as you can see the moon does orbit around the earth, but it’s more of a halo around it rather than going across and around it. Is there a way in which you can think of to achieve a proper orbit? Also the rocket orbits with the earth but it doesn’t actually move on it’s own, it’s more of an addition to the group.

This is the link to the gif made: https://imgur.com/a/LEgcIIi