Question

如何在不使用图像的情况下为天空制作渐变色？

这就是我到目前为止（我知道它为什么不起作用 - 它只是我想要做的参考）：

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

ThreeJS解决方案也受到欢迎，但我需要帮助将它们集成到A-Frame场景中。

Answer 1

您可能希望 Register a custom material/shader 类似于@ngokevin的 aframe-sun-sky ngokevin/kframe 或使用 registerShader

这看起来像是来自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')
});

只是为了注意你通过aframe原语<a-sky>说明Skybox是geometry: { primitive: 'sphere' }

Answer 2

我最终在给定示例的帮助下解决了这个问题。谢谢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'
  }
});

A帧中的渐变天空

2 个答案: