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

Question

you probably noticed me asking quite a few questions related to my project so thank you in advance for all the support.

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

                   planetEarth.add( planetMoon );
                planetEarth.add(rocketGroup);

            // call the render function
            var angle = 0;
            render();

            function render() {
                stats.update();

                 // rotate the orbit group
                angle += 0.002;                    
                angle += 0.002 * controls.EarthRotationSpeed;
                planetEarth.rotation.y += controls.EarthRotationSpeed;                    
                planetMoon.rotation.y += controls.MoonRotationSpeed;                    
                angle+= 0.01 * controls.SunRotationSpeed;
                planetSun.rotation.y += controls.SunRotationSpeed;        

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


                littleOrbitGroup.rotation.x = -angle;


                // render using requestAnimationFrame
                requestAnimationFrame(render);
                renderer.render(scene, camera);
            }

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?

----------------EDIT-----------------

function createMesh(geom) {
                    var loader = new THREE.TextureLoader();
                    var planetTexture = loader.load("../assets/textures/planets/Earth.png");
                    var normalTexture = loader.load("../assets/textures/planets/EarthNormal.png");
                    var planetMaterial = new THREE.MeshPhongMaterial({map: planetTexture, bumpMap: normalTexture});
                    // create a multimaterial
                    var mesh = THREE.SceneUtils.createMultiMaterialObject(geom, [planetMaterial]);
                    return mesh;
                }

Answer 1

You can easily do that using nesting of THREE.Object3D one inside another, shifting them by rotarions radiuses and rotating it's around centers.

Look at this simple example, here used orbit controls - use mousewheel to zoom out and drag to rotate:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js"></script> <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script> <script> THREE.TOUCH = {} let base64prefix = 'data:image/png;base64,' let blue = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkuPn/PwAFkgLZdUNuXwAAAABJRU5ErkJggg==' let blue2= 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkqPz/HwAEcgJ5UUczUQAAAABJRU5ErkJggg==' let orange = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8H8PwHwAGGQJcoBRfLQAAAABJRU5ErkJggg==' let solarsystem = [{ texture: blue, name: 'earth', radius: 2, orbit: 30, speed: 2, satellites: [{ texture: blue2, rotation: [1, 1, 1], name: 'rock', radius: 0.5, orbit: 4, speed: 5, },{ texture: blue2, name: 'moon', radius: 1, orbit: 6, speed: 1, }] }, { texture: orange, name: 'mars', radius: 2, orbit: 50, speed: 1, satellites: [{ texture: blue2, name: 'phobos', radius: 0.5, orbit: 3, speed: 1, }, { texture: blue2, name: 'deimos', radius: 0.5, orbit: 4, speed: 3, }] }]; var scene = new THREE.Scene(); var aspect = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspect, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); // planets solarsystem.forEach(d => create(d, scene)); // sun let sun = sphere({radius:3, orbit:0, texture: orange}); scene.add(sun) function create(d, target) { var o = new THREE.Object3D(d.name); d.rotation && o.rotateX(d.rotation[0]); d.rotation && o.rotateY(d.rotation[1]); d.rotation && o.rotateZ(d.rotation[2]); o.add(orbit(d)); let p = sphere(d) o.add(p); d.satellites && d.satellites.forEach(d1 => create(d1, p)) target.add(o); do=o; } function orbit(d) { var o = new THREE.Object3D('orbit '+d.name); o.rotateX(Math.PI/2); o.add( new THREE.Line( new THREE.CircleGeometry( d.orbit, 64 ), new THREE.LineBasicMaterial( { color: 0xffffff } ) )); return o; } function sphere(d){ var o = new THREE.Object3D('sphere '+d.name); o.translateX(d.orbit); var loader = new THREE.TextureLoader(); loader.load( base64prefix + d.texture, function ( texture ) { var geometry = new THREE.SphereGeometry( d.radius, 20, 20 ); var material = new THREE.MeshBasicMaterial( { map: texture, overdraw: 0.5 } ); o.add( new THREE.Mesh( geometry, material ) ); } ); return o; } var grid = new THREE.GridHelper(500, 100, 0x666666, 0x444444) grid.rotateY(Math.PI/2); scene.add(grid); camera.position.set(25,25,25); new THREE.OrbitControls( camera, renderer.domElement ); let t = 0 function render(dt) { let t2 = dt - t; requestAnimationFrame( render ); renderer.render( scene, camera ); solarsystem.forEach(upd); sun.rotateY(t2/1000); t = dt; function upd(d) { dorotateY(t2/10000*d.speed); d.satellites && d.satellites.forEach(upd) } } requestAnimationFrame( render ); </script> <style> body, canvas { margin: 0; width: 100%; height: 100%; overflow: hidden; background-color: black; } </style>

PS: Sorry for my english