A 帧中的渐变天空

Posted 2023-02-25

【中文标题】A 帧中的渐变天空

【英文标题】：Gradient Sky In A-Frame

【发布时间】：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 场景中的帮助。

【参考方案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 设计师。感谢您的领导，尽管我会处理它并很快检查它是否被选中。