threejs 设置透明色答案

【问题标题】：threejs set transparent colorthreejs 设置透明色
【发布时间】：2018-08-20 18:32:46
【问题描述】：

我希望能够通过颜色（在 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);

感谢您的帮助。

【问题讨论】：

您有没有实施您的任何想法但没有奏效？

标签： three.js webgl

【解决方案1】：

从文档中可以看出，您可以使用 MeshBasicMaterial 的 .alphaMap 属性来实现您想要做的事情。请注意，使用 WebGLRenderer，您将使用绿色通道作为您的 Alpha 值 (RGB)，而不是 Alpha 通道。

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

【讨论】：