A 帧中的渐变天空

Question

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

这是我目前所拥有的（我知道为什么它不起作用 - 它只是我正在尝试做的事情的参考）：

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

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

Answer 1

您可能想要 Register a custom material/shader similar to @ngokevin 's aframe-sun-sky at ngokevin/kframe or use 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')
});

请注意，您平铺说 Skybox by aframe primitive <a-sky> 是 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 帧中的渐变天空

Gradient Sky In A-Frame

three.js

aframe