JSFiddle - React, Tailwind, and code Playground

by Piotr Milewski

HTML

<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script>
  AFRAME.registerComponent("foo", {
    init: function() {
      var vertexShader = '\
      varying vec2 vUv;\
      void main() {\
        vUv = uv;\
        vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);\
        gl_Position = projectionMatrix * mvPosition;\
      }\
      ';

      var fragmentShader = '\
      #define M_PI2 6.28318530718\n \
      uniform float brightness;\
      varying vec2 vUv;\
      vec3 hsb2rgb(in vec3 c){\
          vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, \
                           0.0, \
                           1.0 );\
          rgb = rgb * rgb * (3.0 - 2.0 * rgb);\
          return c.z * mix( vec3(1.0), rgb, c.y);\
      }\
      \
      void main() {\
        vec2 toCenter = vec2(0.5) - vUv;\
        float angle = atan(toCenter.y, toCenter.x);\
        float radius = length(toCenter) * 2.0;\
        vec3 color = hsb2rgb(vec3((angle / M_PI2) + 0.5, radius, brightness));\
        gl_FragColor = vec4(color, 1.0);\
      }\
      ';

      var material = new THREE.ShaderMaterial({
        uniforms: {
          brightness: {
            type: 'f',
            value: 0.9
          }
        },
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      });
      this.mesh = this.el.getObject3D('mesh');
      this.mesh.material = material;
    }
  })
</script>

<a-scene>
    <a-circle position="-1 0.5 -3" rotation="0 0 0" material foo></a-circle>
</a-scene>