Three.js透明纹理部分渲染

Question

我正在尝试将包含透明元素的单个纹理加载到collada模型中。最初，我设置：

  

this.renderer = new THREE.WebGLRenderer（{                   antialias：true，alpha：true               }）;

然而，这给出了html页面的背景颜色。

然后，通过其他SO链接，我发现并尝试了这些：

  

material.transparent = true;

     

material.depthWrite = false;

     

material.depthTest = false;

     

material.alphaTest = 0.5;

但结果保持不变（白色而不是透明）。我终于找到了一个解决方案，建议编辑dae文件并在每次出现<transparent></transparent>块后面添加一行：

<transparency><float>0.100000</float></transparency>    

此后，白色消失，透明纹理呈现，但只是部分呈现。

从另一侧查看时，此效果更为明显：

实时查看此效果的链接是here

我尝试了以下SO链接，但它们似乎无法正常工作：

  

Three.js / WebGL - transparent planes hiding other planes behind them

     

Managing z-buffering with transparent textures in Three.js

     

Three.js png texture - alpha renders as white instead as transparent

     

Displaying background colour through transparent PNG on material?

     

three.js transparent texture and shader material