在Three.js中的模糊的画布纹理

时间:2018-06-14 09:15:22

标签: javascript three.js

我正在尝试在Three.js场景中使用模糊纹理,但它看起来不正确。

画布:

var c = document.getElementById("myCanvas");
var context1 = c.getContext("2d");

context1.filter = "blur(16px)";
context1.beginPath();
context1.fillStyle = "red";
context1.moveTo(35, 65);
context1.lineTo(905, 55);
context1.lineTo(605, 155);
context1.lineTo(65, 105);
context1.fill();

画布纹理:http://jsfiddle.net/7Lzag9kc/

Three.js材料:

var texture1 = new THREE.Texture(canvas1) 
texture1.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ 
     map: texture1,
     transparent: true, 
     side: THREE.DoubleSide, 
     alphaTest: 0.5
});

Three.js场景:http://jsfiddle.net/h31wv2xb/5/

我错过了什么?

1 个答案:

答案 0 :(得分:0)

尝试从纹理构造函数中删除“alphaTest”。