Three.Js在webgl中繪製線性漸變紋理

Question

使用canvas繪製器，我使用繪製線性漸變的函數。我希望這個也可以和webgl渲染器一起工作，但它會影響透明度。代碼如下，here is a link to a fiddle這說明了我的意思。

function generateTexture() { 

var size = 512; 

// create canvas 
canvas = document.createElement('canvas'); 
canvas.width = size; 
canvas.height = size; 

// get context 
var context = canvas.getContext('2d'); 

// draw gradient 
context.rect(0, 0, size, size); 
var gradient = context.createLinearGradient(0, 0, size, size); 
gradient.addColorStop(0, '#99ddff'); // light blue 
gradient.addColorStop(1, 'transparent'); 
context.fillStyle = gradient; 
context.fill(); 

return canvas; 

}

Answer 1

爲WebGLRenderer，你需要設置material.transparent = true。

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

更新小提琴：http://jsfiddle.net/FtML5/3/

three.js所r.62