javascript - 为什么我的 Three.js 透明纹理会破坏，除非它的一部分超出了视口(viewport)？

Question

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

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

但是，奇怪的是，当图像的任何部分从视口(viewport)中剪辑出来时，透明度再次开始起作用(这显然是我需要的效果):

我创建了一个孤立的示例，平面是按常规方式创建的:

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

在您的 Material 中添加 alphaTest: 0.5