Gradient Sky In A-Frame - three.js

Question

How might I make a gradient color for the sky without using images?
This is what I have so far (I know why it doesn't work - it is only reference for what I am trying to do):
<a-sky color="linear-gradient(red, yellow)"></a-sky>
ThreeJS solutions welcome as well, but I would need help integrating them into an A-Frame scene.

Answer 1

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

Answer 2

You may want to Register a custom material/shader similar to #ngokevin 's aframe-sun-sky at ngokevin/kframe or use registerShader
Which would look something like following example from docs.
AFRAME.registerShader('hello-world-shader', {
schema: {
color: { type: 'vec3', default: '0.5 0.5 0.5', is: 'uniform' }
},
vertexShader: [
'void main() {',
' gl_Position = gl_ProjectionMatrix * gl_ModelViewMatrix * gl_Vertex;',
'}'
].join('\n'),
fragmentShader: [
'uniform vec3 color;'
'void main() {'
' gl_FragColor = vec4(color, 1.0);',
'}'
].join('\n')
});
And just for notice you tile says Skybox by aframe primitive <a-sky> is geometry: { primitive: 'sphere' }