Question

我试图用一个部分透明的纹理制作一个两个交叉平面的简单树广告牌。自透明仅适用于一个平面，我假设是因为几何相交时的深度排序问题。

几何图形非常简单：

geometry.vertices.push(
    new THREE.Vector3( -1, -1, 0 ),
    new THREE.Vector3( -1,  1, 0 ),
    new THREE.Vector3(  1,  1, 0 ),
    new THREE.Vector3(  1, -1, 0 ),

    new THREE.Vector3( 0, -1, -1 ),
    new THREE.Vector3( 0,  1, -1 ),
    new THREE.Vector3( 0,  1,  1 ),
    new THREE.Vector3( 0, -1,  1 ) );

geometry.faces.push(
    new THREE.Face3( 0, 1, 2 ),
    new THREE.Face3( 0, 2, 3 ),

    new THREE.Face3( 4, 5, 6 ),
    new THREE.Face3( 4, 6, 7 ) );

我不想使用PointCloud广告牌，因为即使相机在他们上面，我也希望树木直立，而不是总是面向相机。

任何人都有可能的解决方法吗？我可以在渲染之前对各个多边形进行排序吗？还有其他方法可以在固定轴上旋转广告牌吗？

Answer 1

如果您有带透明区域的重叠纹理对象，那么深度排序导致的工件的一个解决方案是设置对象材质的alphaTest属性：

material.alphaTest = 0.5; // between 0 and 1

更新小提琴：https://jsfiddle.net/c5qbd8rm/

three.js r.71

Three.js具有交叉多边形的自透明度

1 个答案: