A幀中的漸變色天空

Question

如何在不使用圖像的情況下爲天空製作漸變色？

這是我迄今爲止（我知道爲什麼它不工作 - 它僅僅是爲了什麼，我試圖做參考）：

<a-sky color="linear-gradient(red, yellow)"></a-sky>

ThreeJS解決方案，歡迎爲好，但我需要幫助將它們集成到A-Frame場景中。

Answer 1

我結束了從給定的例子幫助解決它。謝謝Marko，Pablieros，ngokevin和Doob先生！

我結束了創建自定義着色器和原始元素與它一起去： <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

你可能想Register a custom material/shader類似@ngokevin的aframe-sun-sky在ngokevin/kframe或使用registerShader

這會看起來像從文檔下面的例子。

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') });

而只是通知你說瓷磚通過空中包廂原始AFRAME是<a-sky>geometry: { primitive: 'sphere' }