Three.js透明材质混合异常：特定视角下内部网格遮挡问题问询

问题原因 #

1. 深度缓冲区写入冲突：默认情况下，透明Mesh会写入深度缓冲区。当多个透明Mesh重叠时，先渲染的Mesh会在深度缓冲区留下标记，后续Mesh的像素如果深度值大于已标记的值，会被深度测试拦截，无法绘制。
2. 渲染顺序固定：Three.js默认按Mesh添加顺序渲染透明物体，而非按距离相机的远近动态排序。当相机角度变化时，Mesh的实际深度顺序发生反转，但渲染顺序没变，就会出现部分Mesh被遮挡的异常。

修复方案 #

方案1：禁用深度写入（最简便） #

修改透明材质的配置，关闭depthWrite：

const transparentMaterial = (color) => {
    return new THREE.MeshStandardMaterial({
        color: color,
        side: THREE.DoubleSide,
        transparent: true,
        opacity: 0.6,
        metalness: 0,
        roughness: 1,
        depthWrite: false // 禁用深度缓冲区写入
    });
};

该方案让透明Mesh不会修改深度缓冲区，后续透明Mesh的像素可以正常叠加，完美解决重叠遮挡问题，且性能开销极低。

方案2：动态排序透明物体 #

在渲染前，按Mesh到相机的距离从远到近排序，确保远处的透明物体先渲染：

function animate() {
    requestAnimationFrame(animate);
    // 筛选透明物体并按距离排序
    const transparentMeshes = scene.children.filter(child => child.material?.transparent);
    transparentMeshes.sort((a, b) => {
        const distA = a.position.distanceToSquared(camera.position);
        const distB = b.position.distanceToSquared(camera.position);
        return distB - distA; // 远的先渲染
    });
    renderer.render(scene, camera);
}

使用distanceToSquared比distanceTo性能更好，适合复杂场景下的精确深度排序。

方案3：使用AlphaTest替代半透明（适合硬边缘需求） #

如果不需要平滑的半透明效果，可以用alphaTest替代transparent和opacity：

const transparentMaterial = (color) => {
    return new THREE.MeshStandardMaterial({
        color: color,
        side: THREE.DoubleSide,
        alphaTest: 0.5, // 丢弃透明度低于0.5的像素
        metalness: 0,
        roughness: 1
    });
};

该方案不涉及透明混合，不会有深度缓冲区冲突问题，但仅适用于不需要渐变半透明的场景。

为什么仅特定角度出现异常？ #

相机角度变化会改变Mesh在屏幕空间中的深度顺序。比如某个角度下，红色Mesh在黄色Mesh的视觉前方，此时红色Mesh先渲染并写入深度缓冲区，黄色Mesh的重叠像素因深度测试失败被遮挡；当角度反转，黄色Mesh在视觉前方时，渲染顺序却没变（还是红色先渲染），此时黄色Mesh的像素会覆盖红色Mesh，就不会出现遮挡。这种渲染顺序与实际深度顺序不匹配的情况，只在特定角度下触发，因此异常仅在该范围内出现。

内容的提问来源于stack exchange，提问作者Артем Носов