threejs设置透明色

Question

我希望能够通过其颜色（在vertColors数组中定义）设置给定顶点透明度，以便在单个网格上我可以具有不同不透明度的区域。

是否有一种简单的方法可以将定义为特定颜色的所有顶点透明化？

我有一个想法;是否可以扩展/更改MeshBasicMaterial的着色器以将所有黑色区域定义为透明？

或者，我可以将此材质的输出传递给第二个着色器来执行此操作吗？

const geometry = new THREE.BufferGeometry();

const vertPositions = createVertPositions(); //Float32Array of positions
const vertColors = createVertColors(); //Float32Array of colors

geometry.addAttribute('position', new THREE.BufferAttribute(vertPositions, 3));
geometry.addAttribute('color', new THREE.BufferAttribute(vertColors, 3));

const material = new THREE.MeshBasicMaterial({
  transparent: true,
  opacity: 0.5,
  side: THREE.BackSide,
  vertexColors: THREE.VertexColors
});

const mesh = new THREE.Mesh(geometry, material);

感谢您的帮助。

Answer 1

从文档中可以看出，您可以使用的.alphaMap属性来实现您的目标。请注意，使用WebGLRenderer，您将使用绿色通道作为Alpha值（RGB）而不是Alpha通道。

在循环创建颜色数组时，您可以同时根据颜色值生成alphaMap数组。然后，您需要将该数组转换为纹理并将其分配给.alphaMap属性。