Question

我正在使用平面，挤压样条线，和圆柱几何构建教育工具。飞机有纹理贴图，其余的是基本材料或Lambert材料。

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

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

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

Answer 1

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

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

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

Answer 2

只是要发表评论，但时间太长：

标记为transparent = true的对象是画家根据其质心进行排序的，并向后绘制，以便透明层可以正确放置。在添加它们之前，请确保您的mesh.geometries应用了正确的computeBoundingBox（）和computeBoundingSphere（）。如果这不能解决您的问题，请尝试在您的材料上使用material.alphaTest = 0.5。基本上是打开/关闭Alpha的东西。例如遮罩...，但是如果您的纹理中透明度从0到1平滑地渐变，则可能会看到发生Alpha测试阈值的边缘。

three.js中的alpha通道不一致

2 个答案: