three.js - Threejs - How to change the rotation center of a object?

Question

I'm trying to make a solar system with Three.js. I have maked the earth rotate around the sun, but my problem is I do not know how to make the moon rotate around the earth, because the center the rotation center is always the sun, (I guess that it's for because the sun is in the coordinate 0,0,0).

This is my render function with translation and rotation moves:

function render(){
        cameraControls.update();
        angle +=0.01;

        scene.getObjectByName("sun").rotation.y += 0.005;

        scene.getObjectByName("moon").rotation.y += 0.020;

        scene.getObjectByName("moon").position.x = 30 * Math.cos(angle);
        scene.getObjectByName("moon").position.z = 30 * Math.sin(angle);


        scene.getObjectByName("earth").rotation.y += 0.015;
        scene.getObjectByName("earth").position.x = 80 * Math.cos(angle);
        scene.getObjectByName("earth").position.z = 80 * Math.sin(angle);


        scene.getObjectByName("clouds").rotation.y += 0.017;
        scene.getObjectByName("clouds").position.x = 80 * Math.cos(angle);
        scene.getObjectByName("clouds").position.z = 80 * Math.sin(angle);

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

An example of how it looks

I'm a beginner with Three.js. Thanks!

Answer 1

You can do this by using THREE.Group as pivot objects. The general idea looks like this:

var pivot = new THREE.Group();
scene.add( pivot );
pivot.add( mesh );

In your animation loop you always rotate the pivot objects.

Demo: https://jsfiddle.net/f2Lommf5/6202/