遮挡透明 threejs

遮挡透明（Alpha Testing）在Three.js中是一个技术，用于控制场景中的透明物体之间的相互遮挡关系。当两个或多个透明物体重叠时，通常我们会希望较前面的物体遮住后面的，这就是遮挡效果。Three.js提供了一种方式，通过设置材质的alpha测试参数，来决定是否基于像素的alpha值（透明度）进行遮挡。

以下是遮挡透明的基本步骤：

1. **创建透明材质**：首先，为透明物体创建一个支持alpha测试的材质，如`THREE.MeshBasicMaterial` 或 `THREE.MeshPhongMaterial`，并设置`transparent`属性为`true`。

   const material = new THREE.MeshBasicMaterial({ transparent: true, opacity: 0.5, alphaTest: 0.5 });

2. **设置alpha测试阈值**：`alphaTest`参数定义了一个阈值，只有当像素的alpha值低于这个值时，才会执行遮挡检查。默认值为1.0，即完全不透明，0.0表示完全透明。

3. **渲染顺序**：透明物体的渲染顺序也很重要，Three.js默认按Z-Buffer排序，但如果你需要自定义顺序，可以使用`THREE.DepthWrite`和`THREE.CullFaceNone`来改变。

   renderer.setDepthTest(false);
   renderer.setDepthWrite(false);

4. **应用到对象上**：最后将这个材质应用到需要透明效果的`Mesh`上。