GradientMaterial.tsx

import * as THREE from 'three';

const gradientMaterial: THREE.ShaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
      color1: {
        value: new THREE.Color(0xffffff),
      },
      color2: {
        value: new THREE.Color(0xf4f4f4),
      },
    },
    vertexShader: `
      varying vec2 vUv;
  
      void main() {
        vUv = uv;
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
      }
    `,
    fragmentShader: `
      uniform vec3 color1;
      uniform vec3 color2;
    
      varying vec2 vUv;
      
      void main() {
        
        gl_FragColor = vec4(mix(color1, color2, vUv.y), 1.0);
      }
    `,
    wireframe: false,
  });

export default gradientMaterial;