Gradient Sky In A-Frame

I ended up solving it with help from the given examples. Thank you Marko, Pablieros, ngokevin, and Mr Doob!\n\nI ended up creating a custom shader and a primitive element to go along with it: \n<a-gradient-sky material=\"topColor:0 1 0; bottomColor:1 0 0;\"></a-gradient-sky>\n\nAFRAME.registerShader('gradient', {\n schema: {\n topColor: {type: 'vec3', default: '1 0 0', is: 'uniform'},\n bottomColor: {type: 'vec3', default: '0 0 1', is: 'uniform'},\n offset: {type: 'float', default: '400', is: 'uniform'},\n exponent: {type: 'float', default: '0.6', is: 'uniform'}\n },\n vertexShader: [\n 'varying vec3 vWorldPosition;',\n\n 'void main() {',\n\n 'vec4 worldPosition = modelMatrix * vec4( position, 1.0 );',\n 'vWorldPosition = worldPosition.xyz;',\n\n 'gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0 );',\n\n '}'\n ].join('\\n'),\n fragmentShader: [\n 'uniform vec3 bottomColor;',\n 'uniform vec3 topColor;',\n 'uniform float offset;',\n 'uniform float exponent;',\n 'varying vec3 vWorldPosition;',\n 'void main() {',\n ' float h = normalize( vWorldPosition + offset ).y;',\n ' gl_FragColor = vec4( mix( bottomColor, topColor, max( pow( max(h, 0.0 ), exponent ), 0.0 ) ), 1.0 );',\n '}'\n ].join('\\n')\n});\n\nAFRAME.registerPrimitive('a-gradient-sky', {\n defaultComponents: {\n geometry: {\n primitive: 'sphere',\n radius: 5000,\n segmentsWidth: 64,\n segmentsHeight: 20\n },\n material: {\n shader: 'gradient'\n },\n scale: '-1 1 1'\n },\n\n mappings: {\n topColor: 'material.topColor',\n bottomColor: 'material.bottomColor',\n offset: 'material.offset',\n exponent: 'material.exponent'\n }\n});\n",