前言

今天分享一个用 Shader 实现的渐变色例子，很简单，用途很广。

在线预览

解析

首先生成一个矩形平面，设置2个颜色color1和color2，然后设置渐变强度power,在材质那边引入，最关键的 transparent:true 这个属性要设置。

function initBox() {
    var uniforms = {
        color1: {
            value: new THREE.Color('#0eb3ff')
        },
        color2: {
            value: new THREE.Color('#0eb3ff')
        },
        power: {
            value: 2.0
        },
    };
    var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vertexShader').textContent,
        fragmentShader: document.getElementById('fragmentShader').textContent,
        side:THREE.DoubleSide,
        transparent:true
    })

    var geometry = new THREE.PlaneGeometry(200, 100);
    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);
}

然后顶点着色器和片元着色器也设置一下

<script id="vertexShader" type="x-shader/x-vertex">
  varying vec2 vUv;
	void main()
	{
		vUv = uv;
		gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
	}
</script>
    
<script id="fragmentShader" type="x-shader/x-vertex">
  varying vec2 vUv;
  uniform vec3 color1; //渐变1
  uniform vec3 color2; //渐变2
  uniform float power;  //透明范围
  void main( void ) {
    //第一种写法
    vec3 aColor =(1.0-vUv.y)*(color1-color2)+color2;
    //第二种写法
    //vec3 aColor  = mix(color1,color2,vUv.y);
    //第三种写法
    //vec3 aColor =(1.0-vUv.y)*color1+color2*vUv.y;
    float alp =pow((1.0-vUv.y),power);
    gl_FragColor =vec4(aColor,alp);
  }
</script>