three.js中的alpha通道不一致

Question

我正在使用平面,挤压样条和圆柱几何构建教育工具.飞机有纹理贴图,其余的是基本材质或兰伯特材质.

• 在唯一的地图上的飞机上的纹理地图,它确实有一个alpha通道.
• 纹理贴图已经过.GIF和.PNG测试
• 所有对象都有"透明:真"
• renderer = new THREE.WebGLRenderer({antialias:true});

注意:这是以下链接中列出的完全相同的问题.它还没有解决,我的代表不够评论.

在three.js中,alpha通道工作不一致

正如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 );

Answer 1

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

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

还有许多其他与您的主题相关的问题，例如：透明错误