颜色渐变

var mesh = creatGradPlane(0,0,0, 100,100, [[0, '#fcc'], [1, '#fc3']])

scene.add(mesh);

}

function creatGradPlane(x,y,z, w,h, colors ,startX, startY, endX, endY){

    if (startX === undefined){

        startX= 0;  startY = 0;

        endX = 0; endY = h;

    }

    var canvas = document.createElement('canvas');

    canvas.width = w;

    canvas.height = h;

    var ctx = canvas.getContext('2d');

    var gradient = ctx.createLinearGradient(startX, startY, endX, endY);

    if(Array.isArray(colors))

    colors.forEach(element => {

        gradient.addColorStop(element[0], element[1]);

    });

    ctx.clearRect(0, 0, w, h);

    ctx.fillStyle = gradient;

    ctx.fillRect(0, 0, w, h);

    var texture = new THREE.Texture(canvas);

    texture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial( {map: texture} );

    var plane = new THREE.PlaneGeometry( w, h, 4, 4 );

    var mesh = new THREE.Mesh( plane, material );

    mesh.position.set(x,y,z)

    return mesh;

}