为什么我的three.js透明纹理会破坏，除非它的一部分超出视口？

Question

我正在尝试使用具有透明度的PNG对平面进行纹理处理。

当我查看形状时，PNG中的透明部分变黑。

然而，奇怪的是，当图像的任何部分从视口中剪切出来时，透明度开始再次起作用（这显然是我需要的效果）：

我创建了一个孤立的示例，该平面是以常规方式创建的：

var loader = new THREE.TextureLoader();
  loader.load('img/message2.png', function(tex) {
      var mat = new THREE.MeshBasicMaterial({ map : tex, transparent: true });
      var geometry = new THREE.PlaneGeometry( 14, 10 );
      var plane = new THREE.Mesh( geometry, mat );
      plane.position.set(0,0,-10);
      scene.add( plane );
  });

我在这里做错了什么还是个错误？

提前致谢。

Answer 1

在您的资料中添加alphaTest: 0.5

Answer 2

尝试设置材料：

depthWrite: false

或者

alphaTest: 0.5