How to use the webgl-operate.SceneNode function in webgl-operate

protected generateSphere2Node(parent: SceneNode): SceneNode {
        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(1.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial2');
        material.textured = false;

        /* Create geometry. */
        const geometry = new GeosphereGeometry(
            this._context,
            'mesh',
            1.0,

protected generateSphere1Node(parent: SceneNode): SceneNode {
        const gl = this._context.gl;

        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create and load texture. */
        const texture = new Texture2D(this._context, 'Texture');
        texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
            this.invalidate(true);
        });

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');

protected generateBoxNode(parent: SceneNode): SceneNode {
        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(-1.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.5, 0.5, 0.5));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial3');
        material.textured = false;

        /* Create geometry. */
        const geometry = new CuboidGeometry(this._context, 'mesh', true);

        geometry.initialize(this._aMeshVertex, this._aMeshTexCoord);

protected generateSphere1Node(parent: SceneNode): SceneNode {
        const gl = this._context.gl;

        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(0.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create and load texture. */
        const texture = new Texture2D(this._context, 'Texture');
        texture.initialize(1, 1, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE);
        texture.fetch('./data/concrete_floor_02_diff_1k.webp', false).then(() => {
            this.invalidate(true);
        });

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial1');

protected generateSphere2Node(parent: SceneNode): SceneNode {
        /* Create node and transform */
        const node = parent.addNode(new SceneNode('mesh'));
        const translate = mat4.fromTranslation(mat4.create(), vec3.fromValues(1.0, 0.0, 0.0));
        const scale = mat4.fromScaling(mat4.create(), vec3.fromValues(0.4, 0.4, 0.4));
        const transformMatrix = mat4.multiply(mat4.create(), translate, scale);

        const transform = new TransformComponent(transformMatrix);
        node.addComponent(transform);

        /* Create material */
        const material = new SceneExampleMaterial(this._context, 'ExampleMaterial2');
        material.textured = false;

        /* Create geometry. */
        const geometry = new GeosphereGeometry(
            this._context,
            'mesh',
            1.0,

protected generateScene(): void {
        this._scene = new SceneNode('root');

        this.generateSphere1Node(this._scene);
        this.generateSphere2Node(this._scene);
        this.generateBoxNode(this._scene);
    }

protected generateScene(): void {
        this._scene = new SceneNode('root');

        this.generateSphere1Node(this._scene);
        this.generateSphere2Node(this._scene);
        this.generateBoxNode(this._scene);
    }