如何在 THREE.js 中更改透明图像的背景？

Question

https://codepen.io/joe1992/pen/yLQRwrg

在我的 Three.js 项目中，我想将 .png 文件应用于对象，但 Alpha 通道不允许底层对象的颜色显示出来；好像所有东西都被删除了。

我尝试了很多选项，从图像的透明度到混合组合，这可能与此有关吗？ 当我使用以下代码时，它接近我想要的，但白色背景不像对象的其余部分那样透明：

blendEquation: THREE.AddEquation,
blendSrc: THREE.SrcAlphaFactor,
blendDst: THREE.OneMinusDstColorFactor,

Answer 1

@Rabbid76

PNG 很好，有透明背景。

试试这个

const imageMaterial = new THREE.MeshBasicMaterial({
  map: imageTexture,
  alphaTest: 0.001,
  transparent: true,
  side: THREE.DoubleSide,
  blending: THREE.CustomBlending,
  blendEquation: THREE.AddEquation,
  blendSrc: THREE.SrcAlphaFactor,
  // blendDst: THREE.OneMinusDstColorFactor,
});

const transparentMaterial = new THREE.MeshBasicMaterial({
  color: whiteColor,
  opacity: 0.0,
  transparent: true,
});

const cubeMesh = new THREE.Mesh(geometry, [
  transparentMaterial,
  transparentMaterial,
  imageMaterial,
  transparentMaterial,
  transparentMaterial,
  transparentMaterial,
]);