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;
}
