three.js 中的 Alpha 通道不一致答案

【问题标题】：Inconsistent alpha channel in three.jsthree.js 中的 Alpha 通道不一致
【发布时间】：2012-09-19 13:17:39
【问题描述】：

我正在使用平面、拉伸样条线和圆柱几何体构建一个教育工具。平面有一个纹理贴图，其余的要么是基本材质要么是 Lambert 材质。

平面上的纹理贴图在唯一的地图中，它确实有一个 alpha 渠道。
纹理贴图已被测试为 .GIF 和 .PNG
所有对象都有“透明：真”
renderer = new THREE.WebGLRenderer( {antialias:true} );

注意：这与以下链接中列出的完全相同的问题。还没有解决，我的Rep不够高，无法评论。

in three.js, alpha channel works inconsistently

正如 mmaclaurin 所说，这可能是基于绘制顺序和相机位置的变化。我正在使用 THREE.TrackballControls 并将相机移动限制在两个轴上。

为线框添加或删除 BasicMaterial 不会改变问题。

感谢您抽出宝贵时间阅读本文以及您能提供的任何帮助！

平面对象示例：

var T4map = new THREE.ImageUtils.loadTexture( 'medium_T4.png' );
    var T4Material = new THREE.MeshBasicMaterial( { opacity: .96, transparent:true, map: T4map } );
    var T4Geometry = new THREE.PlaneGeometry(810, 699, 10, 10);
    var T4 = new THREE.Mesh(T4Geometry, T4Material);
    T4.position.y = -CNspacing;
    T4.doubleSided = true;
    scene.add(T4);

问题最明显的拉伸样条几何示例：

var mesh = THREE.SceneUtils.createMultiMaterialObject( geometry, [
new THREE.MeshLambertMaterial( { color: 0xaaff00, opacity: 0.5, transparent: true } ),           
      mesh.position.set( x, y, z );
      mesh.scale.set( s, s, s );
      parent.add( mesh );

【问题讨论】：

新观察：它可能只发生在 y=0 以下
将所有对象移动到 y>0 没有帮助。但是，如果我将相机移动通过所有 y 位置以观察缺少 alpha，效果最终会停止。听起来像是绘图问题...
问题停止，但透明度丢失并永远消失（直到刷新）

标签： three.js

【解决方案1】：

尝试使用depthTest。通常这会有所帮助：

new THREE.MeshBasicMaterial( { side:THREE.BackSide,map:texture,transparency:true, opacity:0.9, depthWrite: false, depthTest: false });

还有许多与您的主题相关的其他问题，例如：transparent bug

【讨论】：

【解决方案2】：

刚要评论，但太长了：

标记为 transparent = true 的对象是根据其质心排序的画家，并从前向后绘制，这样透明度层大部分正确。确保你的 mesh.geometries 在添加它们之前应用了正确的 computeBoundingBox() 和 computeBoundingSphere() ......如果这不能解决你的问题，然后尝试在你的材料上使用 material.alphaTest = 0.5 .. 这适用于大部分是开/关 alpha 的东西......比如蒙版......但如果您的纹理中有从 0 到 1 的平滑透明度渐变，您可能会看到发生 alpha 测试阈值的边缘。

【讨论】：