.js

AFRAME.registerComponent('spherecube', {
    schema: {
        color: {type: 'color', default: '#FFF'},
        radius: {type: 'number', default: '1'},
        segments: {type: 'int', default: '8'},
    },
    init: function() {
        const data = this.data;
        const el = this.el;
        this.geometry = new SphereCubeBufferGeometry(data.radius, data.segments);
        this.material = new THREE.MeshBasicMaterial();
        this.mesh = new THREE.Mesh(this.geometry, this.material);
        el.setObject3D('mesh', this.mesh);
    },
    remove: function() {
        this.el.removeObject3D('mesh');
    },
});

AFRAME.registerPrimitive('a-videospherecube', AFRAME.utils.extendDeep({}, AFRAME.primitives.getMeshMixin(), {
    defaultComponents: {
        spherecube: {
            radius: 1,
            segments: 8,
        },
        material: {
            color: '#FFF',
            shader: 'flat',
        },
        scale: '-1 1 1',
    },
    mappings: {
        color: 'material.color',
        radius: 'spherecube.radius',
        segments: 'spherecube.segments',
        src: 'material.src',
    },
}));