Meshes not visible in scene?

Questions
1

Build: https://grimzero.github.io/Portfolio/

I have a class that does some stuff and in theory it should work, I have been doing it on paper and can’t figure out why I can’t see anything other than the circles.

What I am trying to create is a scene with a Sun object at the center, where other objects orbit around it (around a pivot at the location of the sun). I had that part working at first, but now I have added another child that orbits around the planet (that is orbiting around the sun, and everything is kinda breaking) My meshes are not visible, but their position when logged is correct…

This is the object used for all elements of the scene.

export class SolarBody extends THREE.Object3D {

    subPivot: Object3D;

    constructor(name: string, material: THREE.Material, distance: number = 0, scale: number = 1, initRotation: number = 0, callbacks?: Callback[]) {
        super();

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

        this.subPivot = new Object3D();
        this.position.set(distance, 0, 0);

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

        THREE.EventDispatcher.call(this);
        if (callbacks) {
            callbacks.forEach(callback => {
                this.addEventListener(callback.type, callback.event);
            });
        }

        mesh.position.set(distance, 0, 0);

        if (this.parent && this.parent.type !== 'Scene') {
            (this.parent as SolarBody).subPivot.add(this);
        }

        this.add(this.subPivot);

        this.subPivot.rotation.z = THREE.Math.degToRad(initRotation);
    }
    
    addOrbital(solarBody: SolarBody, offset: number = 10) {
        this.subPivot.add(solarBody);
        solarBody.subPivot.position.add(new THREE.Vector3(offset, 0, 0));
    }
}

And here I am creating the scene

    // Create Solar system
    const sun = new SolarBody('Sun', this.materialLibrary.getMaterial('planetWireframe'), 0, 1, 30, [{
      type: 'orbit', event: (callback: Callback) => {
        this.rotate(callback.target as THREE.Object3D, 0.1);
      }
    }]);

    this.scene.addBody(sun);

    const programming = new SolarBody('Programming', this.materialLibrary.getMaterial('planetWireframe'), 5, 1, 30, [{
      type: 'orbit', event: (callback: Callback) => {
        this.rotate(callback.target as THREE.Object3D, 0.1);
      }
    }]);

    const csharp = new SolarBody('C#', this.materialLibrary.getMaterial('planetWireframe'), 3, 0.2, 225, [{
      type: 'orbit', event: (callback: Callback) => {
        this.rotate(callback.target as THREE.Object3D, 3);
      }
    }]);
    programming.addOrbital(csharp);

    sun.subPivot.add(programming);

However, as you can see in the demo, nothing is rendered but the circles, and I really don’t know why…

Lastly this is my scene code:

export class SolarSystem extends THREE.Scene {
    sceneData: Map<string, SolarBody> = new Map<string, SolarBody>();

    dispatch(event: string) {
        this.sceneData.forEach(element => {
            element.dispatchEvent({ type: event });
        });
    }

    private addToScene(name: string, body: SolarBody) {
        this.sceneData.set(name, body);
        body.name = name;
        super.add(body);
    }

    addBody(body: SolarBody, orbitals?: SolarBody[]) {
        this.addToScene(body.name, body);
        if (orbitals !== undefined) {
            orbitals.forEach(element => {
                body.add(element);
            });
        }
    }

    get(value: string) {
        return this.sceneData.get(value);
    }
}

EDIT: I know its a lot of code, but I cant make it a lot smaller sadly. Most of this stuff is needed for what I am doing… If the layout on here does not allow for easy reading, feel free to look at my GitHub Instead. https://github.com/GrimZero/Portfolio

2

turns out im retarded and forgot to add the meshes to my scene… RIP Brain…

3 Likes