三.js在webgl中绘制线性渐变纹理答案

【问题标题】：Three.Js draw linear gradient texture in webgl三.js在webgl中绘制线性渐变纹理
【发布时间】：2013-11-28 07:55:42
【问题描述】：

在画布渲染器中，我使用了一个绘制线性渐变的函数。我希望它也可以与 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;

}

【问题讨论】：

标签： three.js webgl

【解决方案1】：

对于WebGLRenderer，需要设置material.transparent = true。

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

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

three.js r.62

【讨论】：

噢！我知道在设置材质本身的不透明度设置时必须使用该属性，但在使用具有透明度的纹理时没有考虑它。感谢您为我解决这个问题，哈哈。有点失望，我没有把 2 和 2 放在一起。