7

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

  • 唯一贴图平面上的纹理贴图，它确实有一个 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 );
4

2 回答 2

3

尝试玩弄depthTest. 通常这会有所帮助：

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

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

于 2012-12-10T02:28:10.100 回答
0

刚要评论，但太长了：

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

于 2018-07-01T08:24:32.680 回答