[not urgent] where is the code to create this gradient texture for a sphere as scene background?

Questions
1

I couldn’t find the code to create the gradient texture as background of the scene in the examples of the physics library enable3d in its github repo, such as the one shown below:

https://enable3d.io/examples/standalone-mode.html

Screen Shot 2021-03-02 at 21.41.30 PM
Screen Shot 2021-03-02 at 21.41.30 PM1265×1193 60.7 KB

2

Hi
Take a look at line 71 of HTML section of this codepen: https://codepen.io/prisoner849/pen/BaNvBgw

Create a canvas, draw a gradient on it, use the canvas for THREE.CanvasTexture(), use this texture in .map parameter of material for a sphere.

3

The code for the gradient could look like this (please let me know if you have something more optimized):

import { BackSide, Color, Mesh, ShaderMaterial, SphereGeometry } from 'three'

/**
 * This handler manages the environment of the scene, including the background sphere and fog.
 */
export default class EnvironmentHandler extends AbstractHandler {

  private readonly sphere: Mesh
  public constructor(renderManager: RenderManager) {
      super(renderManager)
      const geometry: SphereGeometry = new SphereGeometry(RenderManager.sphereRadius, 20, 20)

      const vertexShader: string /* glsl */ = `
      varying vec3 vWorldPosition;
  
      void main() {
        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
        vWorldPosition = worldPosition.xyz;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
      }
    `

      const fragmentShader: string /* glsl */ = `
        uniform vec3 topColor;
        uniform vec3 middleColor;
        uniform vec3 bottomColor;
    
        varying vec3 vWorldPosition;
    
        void main() {
          vec3 normalizedPos = normalize(vWorldPosition);
          float percent = 1.0 - (1.0 + normalizedPos.y) * 0.5; // Adjust the multiplier for the gradient falloff
    
          vec3 color;
          if (percent < 0.3) {
            float adjustedPercent = smoothstep(0.0, 0.3, percent);
            color = mix(topColor, middleColor, adjustedPercent);
          } else if (percent < 0.5) {
            float adjustedPercent = smoothstep(0.3, 0.5, percent);
            color = mix(middleColor, bottomColor, adjustedPercent);
          } else if (percent < 0.55) {
            float adjustedPercent = smoothstep(0.54, 0.55, percent);
            color = mix(bottomColor, vec3(1.0), adjustedPercent);
          } else {
            color = vec3(1.0);
          }  
    
          gl_FragColor = vec4(color, 1.0);
        }
      `

      const backgroundMaterial: ShaderMaterial = new ShaderMaterial({
        fragmentShader: fragmentShader,
        vertexShader: vertexShader,
        uniforms: {
          topColor: { value: new Color('#1279f1') },
          middleColor: { value: new Color('#4390e7') },
          bottomColor: { value: new Color('#ffffff') }
        },
        depthWrite: false,
        side: BackSide
      })
  
      this.sphere = new Mesh(geometry, backgroundMaterial)
  }

  public onStart(): void {
    super.onStart()

    this.renderManager.scene.add(this.sphere)
  }
}