A 帧中的渐变天空答案

【问题标题】：Gradient Sky In A-FrameA 帧中的渐变天空
【发布时间】：2016-11-06 20:24:19
【问题描述】：

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

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

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

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

【问题讨论】：

three.js skydome with gradient的可能重复
感谢您的回答。我正在请求有关如何将这种方法集成到 A-Frame 场景中的帮助。

标签： three.js aframe

【解决方案1】：

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

【讨论】：

【解决方案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')
});

并且只是为了注意你的瓷砖说Skybox by aframe原语<a-sky>是geometry: { primitive: 'sphere' }

【讨论】：

是的，我完全是浏览器中 3d 的菜鸟。 A-Frame 为我改变了游戏，因为我确信它已经并且将会有许多 2d 设计师。感谢您的领导，尽管我会处理它并很快检查它是否被选中。