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