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

Three.Js在webgl中绘制线性渐变纹理

1 个答案: