三.js在webgl中绘制线性渐变纹理 [英] Three.Js draw linear gradient texture in webgl
本文介绍了三.js在webgl中绘制线性渐变纹理的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
对于画布渲染器,我使用了一个绘制线性渐变的函数.我希望它也能与 webgl 渲染器一起使用,但它会阻碍透明度.代码在下面,这里是一个小提琴链接,它说明了我的意思.
With canvas renderer, I am using a function that draws a linear gradient. I would like this to work with the webgl renderer as well, but it chokes on transparency. The code is below and here is a link to a fiddle which demonstrates what I mean.
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;
}
推荐答案
对于WebGLRenderer
,需要设置material.transparent = true
.
var material = new THREE.MeshBasicMaterial( { map: texture, transparent: true } );
更新小提琴:http://jsfiddle.net/FtML5/3/
three.js r.62
three.js r.62
这篇关于三.js在webgl中绘制线性渐变纹理的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文