Orbital rotations not working as intended

I have 3 objects defined, which are basically Object3D:

    // Create Solar system
    const sun = new SolarBody('Sun', this.materialLibrary.getMaterial('planetWireframe'), this.scene, 0, 2, 30);
    const programming = new SolarBody('Programming', this.materialLibrary.getMaterial('planetWireframe'), sun, 10, 1, 30);
    const csharp = new SolarBody('Csharp', this.materialLibrary.getMaterial('planetWireframe'), programming, 1, 0.2, 225);

and they are being created as follows:

export class SolarBody extends THREE.Object3D {
    initialRotation: number;
    mesh: THREE.Mesh;

    constructor(name: string, material: THREE.Material, parent: Object3D, distance: number = 0,
        radius: number = 1, initRotation: number = 0) {

        this.name = name;

        const shape = new THREE.IcosahedronBufferGeometry(radius, 1);
        this.mesh = new THREE.Mesh(shape, material);

        this.mesh.name = name + '_mesh';

        this.mesh.position.set(distance, 0, 0);
        this.initialRotation = initRotation;

What I want to achieve is that the ‘sun’ is the base object in the scene, whereas ‘programming’ is childed to a pivot that is on the same location (so it can rotate freely without being affected by the ‘sun’) from there the same applies for the ‘c#’ object and subsequent other objects in this structure.

However, I must be missing something. Since everything I have tried has resulted in some weird effect… I am pretty sure I’m close to the solution, but I just can’t find the exact problem.

The current code I have works for the first object, but goes wrong as soon as its a second level child… I go from one issue to the next and I don’t know what I am doing wrong…

You can see what it looks like here: https://grimzero.github.io/Portfolio/

UPDATE: I have tried a different approach and this has worked out better to some extent. The Issue with the current updated code is that the first child works, but the second is childed to the origin point and not to the correct object. The link with the build has also been updated.The object that is wrong is located inside the center object of the scene…

I have been working on this for a few hours, with no actual progress in terms of solving the issue…


If you add a satellite to a planet, the satellite and all descendants will be affected by the planet rotation.

It works for you at the first level because you are not rotating the Sun, presumably.

To make it work, don’t add the meshes childs to their SolarBody parent. Add them to the scene instead.

Update the mesh position from the SolarBody world position in each frame:

this.mesh.position.set(distance, 0, 0).applyMatrix4( this.matrixWorld );

I fixed it by not setting the position, but adding it… seems setting was in world position…